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.