文本

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

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

样式修饰符

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.

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

文本描边

添加.uk-text-stroke类以创建轮廓标题。

小号

中号

大号

特大号

2 倍特大号

3 倍特大号

<h1 class="uk-heading-small uk-text-stroke">Small</h1>
<h1 class="uk-heading-medium uk-text-stroke">Medium</h1>
<h1 class="uk-heading-large uk-text-stroke">Large</h1>
<h1 class="uk-heading-xlarge uk-text-stroke">X-Large</h1>
<h1 class="uk-heading-2xlarge uk-text-stroke">2X-Large</h1>
<h1 class="uk-heading-3xlarge uk-text-stroke">3X-Large</h1>

文档

文本

小号

中号

大号

特大号

2 倍特大号

3 倍特大号