文本

用于设置文本样式的实用class集。

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

样式修饰

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

Class	Description
`.uk-text-lead`	突出显示文本，比如文章子标题
`.uk-text-meta`	添加到包含相关文章或类似内容的元数据中。

Class	Description
`.uk-text-small`	减小字体
`.uk-text-large`	增大字体

字体粗细

调整文本的字体粗细。

Class	Description
`.uk-text-light`	字体粗细为`300`.
`.uk-text-normal`	字体粗细为`400`.
`.uk-text-bold`	字体粗细为`700`.
`.uk-text-lighter`	较淡的字体粗细
`.uk-text-bolder`	较粗的字体

字体样式

添加.uk-text-italic class 创建斜体文本.

大小写转换

The following classes will transform text into uppercased, capitalized or lowercased characters.

Class	Description
`.uk-text-capitalize`	转换为首字母大写
`.uk-text-uppercase`	转换为字母大写
`.uk-text-lowercase`	转换为字母小写

文本颜色

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

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

文字背景

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

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

文本对齐

调整文本对齐方式。

Class	Description
`.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>

响应式

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

Class	Description
`.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>

垂直对齐

使文本与对象垂直对齐。

Class	Description
`.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="/skin/ukv3/images/avatar.jpg" width="50" height="50">
        <span class="uk-text-top">Lorem ipsum.</span>
    </div>
    <div>
        <img src="/skin/ukv3/images/avatar.jpg" width="50" height="50">
        <span class="uk-text-middle">Lorem ipsum.</span>
    </div>
    <div>
        <img src="/skin/ukv3/images/avatar.jpg" width="50" height="50">
        <span class="uk-text-bottom">Lorem ipsum.</span>
    </div>
</div>

文本换行

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

Class	Description
`.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-panel-box 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-panel-box uk-text-break">Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.</div>
    </div>
</div>

UIkit3.x文档

文本