Text

與文字相關的通用類別。


Wrap

white-space Breakpoints

處理元件內的空白字元。使用類別為 .text-wrap{@bp}:

類別名稱
普通模式 .u-text-wrap{@bp}:nm normal
強制不換行 .u-text-wrap{@bp}:nw nowrap
換行 .u-text-wrap{@bp}:p pre
連續空白會被保留。只有在換行字元與有 <br> 時才會換行。
換行 .u-text-wrap{@bp}:pw pre-wrap
連續空白會被保留。換行會在有換行字元、有 <br> 以及被空間限制時觸發。
換行 .u-text-wrap{@bp}:pl pre-line
連續空白會被合併。換行會在有換行字元、有 <br> 以及被空間限制時觸發。
普通模式
.u-text-wrap{@bp}:nm
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dicta ipsa nobis, quis quo rerum? Ad alias, aperiam architecto, dolores eum exercitationem facilis id impedit, libero molestiae non quas quia.

強制不換行
.u-text-wrap{@bp}:nw
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dicta ipsa nobis, quis quo rerum? Ad alias, aperiam architecto, dolores eum exercitationem facilis id impedit, libero molestiae non quas quia.

換行
.u-text-wrap{@bp}:p
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dicta ipsa nobis, quis quo rerum? Ad alias, aperiam architecto, dolores eum exercitationem facilis id impedit, libero molestiae non quas quia.

換行
.u-text-wrap{@bp}:pw
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dicta ipsa nobis, quis quo rerum? Ad alias, aperiam architecto, dolores eum exercitationem facilis id impedit, libero molestiae non quas quia.

換行
.u-text-wrap{@bp}:pl
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dicta ipsa nobis, quis quo rerum? Ad alias, aperiam architecto, dolores eum exercitationem facilis id impedit, libero molestiae non quas quia.

Transform

text-transform

處理文字大小寫,主要用於英文語系。

類別名稱
小寫 .u-lower lowercase
大寫 .u-upper uppercase
首字母大寫 .u-capit capitalize
小寫
.u-lower
lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dicta ipsa nobis, quis quo rerum? Ad alias, aperiam architecto, dolores eum exercitationem facilis id impedit, libero molestiae non quas quia.

大寫
.u-upper
lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dicta ipsa nobis, quis quo rerum? Ad alias, aperiam architecto, dolores eum exercitationem facilis id impedit, libero molestiae non quas quia.

首字母大寫
.u-capit
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dicta ipsa nobis, quis quo rerum? Ad alias, aperiam architecto, dolores eum exercitationem facilis id impedit, libero molestiae non quas quia.

Truncate

overflow text-overflow white-space

將溢出文字隱藏。使用類別名稱為 .u-truncate

lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dicta ipsa nobis, quis quo rerum? Ad alias, aperiam architecto, dolores eum exercitationem facilis id impedit, libero molestiae non quas quia.