文本／Text

# 文本／Text

<p class="uk-text-lead">用于设置文本样式的实用class集。</p>

将此组件与 [Heading 组件](heading.md) 结合使用以设置内容的样式。

## Style modifiers-样式修饰

UIkit提供了各种实用的文本效果来设置文本样式。

| Class           | 描述                                   |
| :-------------- | :------------------------------------------------ |
| `.uk-text-lead` | <span class="uk-text-lead">突出显示文本，比如文章子标题</span>                 |
| `.uk-text-meta` | <span class="uk-text-meta">添加到包含相关文章或类似内容的元数据中。</span> |

***

## Font size-字体大小

调整文本的字体大小

| Class            | 描述                                                                  |
| :--------------- | :--------------------------------------------------------------------------- |
| `.uk-text-small` | <span class="uk-text-small">减小字体</span> |
| `.uk-text-default` | <span class="uk-text-default">设为默认字体大小</span> |
| `.uk-text-large` | <span class="uk-text-large">增大字体</span> |

***

## Font weight-字体粗细

调整文本的字体粗细。

| Class              | 描述                                                                         |
| :----------------- | :---------------------------------------------------------------------------------- |
| `.uk-text-light`   | <span class="uk-text-light">字体粗细为 `300`</span>  |
| `.uk-text-normal`  | <span class="uk-text-normal">字体粗细为 `400`</span> |
| `.uk-text-bold`    | <span class="uk-text-bold">字体粗细为 `700`</span>   |
| `.uk-text-lighter` | <span class="uk-text-lighter">较淡的字体粗细</span> |
| `.uk-text-bolder`  | <span class="uk-text-bolder">较粗的字体</span>   |

***

## Font style-字体样式

添加 `.uk-text-italic` class创建 <span class="uk-text-italic">斜体文本</span>。

***

## Text transform-大小写转换

以下类将文本转换为大写，大写或小写字符。

| Class                 | 描述                                                                                  |
| :-------------------- | :--------------------------------------------------------------- |
| `.uk-text-capitalize` | <span class="uk-text-capitalize">转换为首字母大写：Add this class to transform your text to capitalize.</span> |
| `.uk-text-uppercase`  | <span class="uk-text-uppercase">转换为字母大写：Add this class to transform your text to uppercase.</span>   |
| `.uk-text-lowercase`  | <span class="uk-text-lowercase">转换为字母小写：Add this class to transform your text to lowercase.</span>   |

***

## Text decoration-文字修饰

添加 `.uk-text-decoration-none` class 可以删除 <a class="uk-text-decoration-none" href>链接</a> 文字中的所有文本修饰。

***

## Text color-文本颜色

对文本元素应用不同的颜色。

| Class                | 描述                                |
| :------------------- | :----------------------------------- |
| `.uk-text-muted`     | <span class="uk-text-muted">淡化的文本颜色</span>                                   |
| `.uk-text-emphasis`  | <span class="uk-text-emphasis">强调的文本信息</span>                           |
| `.uk-text-primary`   | <span class="uk-text-primary">强调额外的文本信息</span>     |
| `.uk-text-secondary` | <span class="uk-text-secondary">添加此类以强调带有辅助颜色的文本。</span> |
| `.uk-text-success`   | <span class="uk-text-success">通常表示成功一类积极的信息</span>                          |
| `.uk-text-warning`   | <span class="uk-text-warning">表示警告信息</span>                        |
| `.uk-text-danger`    | <span class="uk-text-danger">表示危险信息</span>                            |

***

## Text background-文字背景

要将渐变或背景图像应用于文本，请将 `.uk-text-background` class添加到文本元素中的 `<span>` 元素。如果不定义 `background-image`的样式，那么将应用颜色primary。

```html
<h1><span class="uk-text-background"></span></h1>
```

***

## Text alignment-文本对齐

调整文本对齐方式。

| Class              | 描述                |
| :----------------- | :------------------------- |
| `.uk-text-left`    | 左对齐   |
| `.uk-text-right`   | 右对齐  |
| `.uk-text-center`  | 文字水平居中 |
| `.uk-text-justify` | 文字两端对齐            |

```example
<div class="uk-child-width-1-3@s uk-grid-small" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-text-left uk-card-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-left</code>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-text-right uk-card-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-right</code>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-text-center uk-card-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-center</code>
            </div>
        </div>
    </div>
</div>
```

***

### 响应式

UIki提供了许多响应的对齐类。它们的使用方式与其他大多数的对齐class基本一致，不同之处在于它们的后缀表示它们从中生效的断点。

| Class                                                               | 描述                                   |
| :------------------------------------------------------------------ | :-------------------------------------------- |
| `.uk-text-left@s`<br> `.uk-text-center@s`<br> `.uk-text-right@s`    | 只在 _640px_ 及以上的宽度生效。  |
| `.uk-text-left@m`<br> `.uk-text-center@m`<br>   `.uk-text-right@m`  | 只在 _960px_ 及以上的宽度生效。  |
| `.uk-text-left@l`<br> `.uk-text-center@l`<br> `.uk-text-right@l`    | 只在 _1200px_ 及以上的宽度生效。 |
| `.uk-text-left@xl`<br> `.uk-text-center@xl`<br> `.uk-text-right@xl` | 只在 _1600px_ 及以上的宽度生效。. |

```example
<div class="uk-child-width-1-3@s uk-grid-small" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-text-center@s uk-card-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-center@s</code>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-text-right@l uk-card-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-right@l</code>
            </div>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-small">
            <div class="uk-text-center@m uk-card-body">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr. <code>.uk-text-center@m</code>
            </div>
        </div>
    </div>
</div>
```

***

### 垂直对齐

使文本与对象垂直对齐。

| Class               | 描述                  |
| :------------------ | :--------------------------- |
| `.uk-text-top`      | 顶部对齐      |
| `.uk-text-middle`   | 垂直居中对齐     |
| `.uk-text-bottom`   | 底部对齐   |
| `.uk-text-baseline` | 基线对齐 |

```example
<div class="uk-child-width-1-3@m uk-child-width-1-2@s" uk-grid>
    <div>
        <img src="images/avatar.jpg" width="50" height="50">
        <span class="uk-text-top">Lorem ipsum.</span>
    </div>
    <div>
        <img src="images/avatar.jpg" width="50" height="50">
        <span class="uk-text-middle">Lorem ipsum.</span>
    </div>
    <div>
        <img src="images/avatar.jpg" width="50" height="50">
        <span class="uk-text-bottom">Lorem ipsum.</span>
    </div>
</div>
```

***

## Text wrapping-文本换行

关于文本换行的一些有用的class。

| Class               | 描述                                       |
| :------------------ | :-------------------------------------- |
| `.uk-text-truncate` | 截断文本，防止文本多行显示 |
| `.uk-text-break`    | 如果文本长度将超过容器宽度时，强制换行。                   |
| `.uk-text-nowrap`   | 防止文本被截断成多行显示。                                |

```example
<div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <div class="uk-pane uk-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div>
        <div class="uk-panel uk-text-break">Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.</div>
    </div>
</div>
```