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