文字

一系列用於設定文字樣式的實用類別。

將此元件與標題元件結合使用，以設定內容樣式。

樣式修飾符

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 倍特大