Utilities
Texts
/path/to/floncss/trumps/texts/texts.css
テキストを制御するためのutility classです。
| Class | Properties | Description |
|---|---|---|
| vertical align | ||
| align:inherit | vertical-align: inherit; | |
| align:baseline | vertical-align: baseline; | |
| align:sub | vertical-align: sub; | |
| align:super | vertical-align: super; | |
| align:text-top | vertical-align: text-top; | |
| align:text-bottom | vertical-align: text-bottom; | |
| align:top | vertical-align: top; | |
| align:middle | vertical-align: middle; | |
| align:bottom | vertical-align: bottom; | |
| text align | ||
| text:left | text-align: left; | |
| text:center | text-align: center; | |
| text:right | text-align: right; | |
| text:justify | text-align: justify; | |
| line height | ||
| lh:none | line-height: 1; | |
| lh | line-height: var(--line-height-base); | --line-height-base に定義した値が適用されます。 |
| lh:2xl | line-height: var(--line-height-2xl); | --line-height-2xl に定義した値が適用されます。 |
| lh:xl | line-height: var(--line-height-xl); | --line-height-xl に定義した値が適用されます。 |
| lh:lg | line-height: var(--line-height-lg); | --line-height-lg に定義した値が適用されます。 |
| lh:md | line-height: var(--line-height-md); | --line-height-md に定義した値が適用されます。 |
| lh:sm | line-height: var(--line-height-sm); | --line-height-sm に定義した値が適用されます。 |
| lh:xs | line-height: var(--line-height-xs); | --line-height-xs に定義した値が適用されます。 |
| lh:2xs | line-height: var(--line-height-2xs); | --line-height-2xs に定義した値が適用されます。 |
| white space | ||
| white-space:normal | white-space: normal; | |
| white-space:nowrap | white-space: nowrap; | |
| white-space:pre | white-space: pre; | |
| white-space:pre-line | white-space: pre-line; | |
| white-space:break-spaces | white-space: break-spaces; | |
Useage
1<div class="text:center">text...</div>
2
3<div class="lh:none">text...</div>
4
5<div class="white-space:pre-line">text...</div>
6...