Press/to search

Typography

Word Break

Utilities for sets the word breaks of an element.


Class

classcss
break-normalword-break: normal;
overflow-wrap: normal
break-wordsoverflow-wrap: break-word;
break-allword-break: break-all;
truncateoverflow: hidden;
text-overflow: ellipsis;
white-space: nowrap

Usage

Set text paragraph break line normally.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem teneturuiaiureeumnatusenimmaximelaudantiumquibusdamillonihil, reprehenderit saepe quam aliquid odio accusamus.
<!-- Example -->
<y class="break-normal">
...
</y>

Set text paragraph break only words.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem teneturuiaiureeumnatusenimmaximelaudantiumquibusdamillonihil, reprehenderit saepe quam aliquid odio accusamus.
<!-- Example -->
<y class="break-words">
...
</y>

Set text paragraph break all lines and words.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem teneturuiaiureeumnatusenimmaximelaudantiumquibusdamillonihil, reprehenderit saepe quam aliquid odio accusamus.
<!-- Example -->
<y class="break-all">
...
</y>

Set text paragraph truncate into a single line.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem itaque beatae, rem teneturuiaiureeumnatusenimmaximelaudantiumquibusdamillonihil, reprehenderit saepe quam aliquid odio accusamus.
<!-- Example -->
<y class="truncate">
...
</y>

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.