Documentation and examples for common text utilities.
Text-align are available like:
I`m a centered text
Example :<p class='text-center'>I`m a centered text</p>Some values for text-align are available with classes:
| Property | Class |
|---|---|
| center | text-center |
| left | text-left |
| right | text-right |
| justify | text-justify |
Text-weight are available like:
I`m a bold text
Example :<p class='text-bold'>I`m a bold text</p>Some values for text-weight are available with classes:
| Weight | Class |
|---|---|
| 100 | text-thin |
| 300 | text-light |
| 400 | text-regular |
| 500 | text-medium |
| 700 | text-bold |
| 900 | text-black |
To add an ellipsis at the end of the text use the following classes:
I`m a One line ellipsis
Example :<p class='text-ellipsis' style='max-width: 90px;'>I`m a One line ellipsis</p>If the text has more than one line use:
I`m a More than line ellipsis
Example :<p class='text-ellipsis-more' style='max-width: 50px; max-height: 57px'>I`m a More than line ellipsis</p>This classe use -webkit-line-clamp: 3 to change the clip on more lines change this prop on your element