文本

一个用于设置文本样式的实用程序类集合。

将此组件与标题组件结合使用以设置内容样式。

样式修饰符

UIkit 提供各种文本实用程序来设置文本样式。

类	描述
`.uk-text-lead`	将此类添加到要突出显示的文本，例如文章副标题。
`.uk-text-meta`	将此类添加到包含有关文章或类似内容的元数据的段落。

类	描述
`.uk-text-small`	添加此类以减小字体大小。
`.uk-text-default`	添加此类以设置默认的字体大小。
`.uk-text-large`	添加此类以增加字体大小。

字体粗细

添加以下其中一个类以修改文本的字体粗细。

类	描述
`.uk-text-light`	添加此类以应用 `300` 的字体粗细。
`.uk-text-normal`	添加此类以应用 `400` 的字体粗细。
`.uk-text-bold`	添加此类以应用 `700` 的字体粗细。
`.uk-text-lighter`	添加此类以应用更轻的字体粗细。
`.uk-text-bolder`	添加此类以应用更粗的字体粗细。

字体样式

添加 .uk-text-italic 类以创建斜体文本。

文本转换

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

类	描述
`.uk-text-capitalize`	添加此类以将文本转换为首字母大写。
`.uk-text-uppercase`	添加此类以将文本转换为大写。
`.uk-text-lowercase`	添加此类以将文本转换为小写。

文本装饰

添加 .uk-text-decoration-none 类以从链接中删除任何文本装饰。

文本颜色

使用以下其中一个类将不同的颜色应用于文本元素。

类	描述
`.uk-text-muted`	添加此类以使文本变暗。
`.uk-text-emphasis`	添加此类以强调文本。
`.uk-text-primary`	添加此类以使用主要颜色强调文本。
`.uk-text-secondary`	添加此类以使用次要颜色强调文本。
`.uk-text-success`	添加此类以指示成功。
`.uk-text-warning`	添加此类以指示警告。
`.uk-text-danger`	添加此类以指示危险。

文本背景

要将渐变或背景图像应用于文本，请将 .uk-text-background 类添加到文本元素内的 <span> 元素中。没有定义 background-image 的样式将应用主要颜色。

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

文本对齐

添加以下其中一个类以对齐文本。

类	描述
`.uk-text-left`	将文本左对齐。
`.uk-text-right`	将文本右对齐。
`.uk-text-center`	水平居中文本。
`.uk-text-justify`	两端对齐文本。

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-left

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-right

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-center

<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>

响应式

UIkit 提供了许多响应式对齐类。基本上，它们的工作方式与普通的对齐类相同，只是它们具有表示它们开始生效的断点的后缀。

类	描述
`.uk-text-left@s` `.uk-text-center@s` `.uk-text-right@s`	影响设备宽度为 640px 及更大的设备。
`.uk-text-left@m` `.uk-text-center@m` `.uk-text-right@m`	影响设备宽度为 960px 及更大的设备。
`.uk-text-left@l` `.uk-text-center@l` `.uk-text-right@l`	影响设备宽度为 1200px 及更大的设备。
`.uk-text-left@xl` `.uk-text-center@xl` `.uk-text-right@xl`	影响设备宽度为 1600px 及更大的设备。

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-center@s

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-right@l

Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-center@m

<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>

垂直对齐

添加以下其中一个类以将文本垂直对齐到对象。

类	描述
`.uk-text-top`	将文本置于顶部。
`.uk-text-middle`	垂直居中文本。
`.uk-text-bottom`	将文本置于底部。
`.uk-text-baseline`	将文本对齐到基线。

Lorem ipsum.

Lorem ipsum.

Lorem ipsum.

<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>

文本换行

添加以下其中一个类以换行文本。

类	描述
`.uk-text-truncate`	阻止文本换行到多行，而是截断它并显示省略号。
`.uk-text-break`	如果字符串长度超过其容器宽度，则断开字符串。
`.uk-text-nowrap`	阻止文本换行到多行。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.

<div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <div class="uk-panel 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>

文档

文本