Text

一组用于为文本设置样式的工具类。

将该组件与 Heading 组件结合使用，为你的内容设置样式。

样式修饰符

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`	添加该类以表示危险。

文本背景

要为文本应用渐变或背景图片，请在文本元素内的 <span> 元素上添加 .uk-text-background 类。未定义 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 类以创建描边标题。

Small

Medium

Large

X-Large

2X-Large

3X-Large

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