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",
);