| Class | Properties |
|---|---|
.break-normal | word-break: normal; |
.break-words | overflow-wrap: break-word; |
.break-all | word-break: all; |
.truncate | overflow: hidden;text-overflow: ellipsis;white-space: nowrap |
Use .break-normal to only add line breaks at normal word break points.
Lorem ipsum dolor sit amet, consecteturadipiscingelitplaceratnulla eleifend. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet.
<p class="break-normal">...</p>Use .break-words to add line breaks mid-word if needed.
Lorem ipsum dolor sit amet, consecteturadipiscingelitplaceratnulla eleifend. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet.
<p class="break-words">...</p>Use .break-all to add line breaks whenever necessary, without trying to preserve whole words.
Lorem ipsum dolor sit amet, consecteturadipiscingelitplaceratnulla eleifend. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet.
<p class="break-all">...</p>Use .truncate to truncate overflowing text with an ellipsis (…) if needed.
Lorem ipsum dolor sit amet, consecteturadipiscingelitplaceratnulla eleifend. Praesent et dolor sapien. Nunc lobortis dui risus, sed placerat nulla eleifend sit amet.
<p class="truncate">...</p>Variants
By default, no responsive or hover-state variants are generated for word break utilities.
Responsive
To include responsive variants like .md:truncate, add "word-break" to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:
$responsive-variants: (
// ...
"word-break",
);
Hover-state
To include hover-state variants like .hover:truncate, add "word-break" to the $hover-variants variable:
$hover-variants: (
// ...
"word-break",
);