Word break

Syntax

Class
Properties
break-normal
overflow-wrap: normal;
word-break: normal;
break-words
overflow-wrap: break-word;
break-all
word-break: break-all;
<div class="t1 w-256 p-16 bg-c-white shadow-4 break-normal"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet ullamcorper neque. Donecplaceratmiutenimporttitorsagittis. Donec nec tincidunt tortor. Fusce sodales, felis ac luctus accumsan, quam mi vestibulum enim, eu gravida nunc tortor a diam. </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Add line breaks at word boundaries only.
t1 break-normal
.t1.break-normal { overflow-wrap: normal; word-break: normal; }
Add line breaks anywhere if necessary.
t1 break-words
.t1.break-words { overflow-wrap: break-word; }
Ignore word boundaries, happily break text by any letter.
t1 break-all
.t1.break-all { word-break: break-all; }