Typography
Word Break
Utilities for sets the word breaks of an element.
Class
class | css |
---|---|
break-normal | word-break: normal; overflow-wrap: normal |
break-words | overflow-wrap: break-word; |
break-all | word-break: break-all; |
truncate | overflow: hidden; text-overflow: ellipsis; white-space: nowrap |
Usage
Set text paragraph break line normally.
<!-- Example -->
<y class="break-normal">
...
</y>
Set text paragraph break only words.
<!-- Example -->
<y class="break-words">
...
</y>
Set text paragraph break all lines and words.
<!-- Example -->
<y class="break-all">
...
</y>
Set text paragraph truncate into a single line.
<!-- Example -->
<y class="truncate">
...
</y>
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | Yes |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |