Typography
Word Break
Utilities for controlling word breaks in an element.
Quick reference
| Class | Description |
|---|---|
break-normal | overflow-wrap: normal
word-break: normal |
break-words | overflow-wrap: break-word |
break-all | word-break: break-all |
break-keep | word-break: keep-all |
Basic usage
Normal
Use break-normal to only add line breaks at normal word break points.
A really long finnish word, that has nothing to do with warp technology, is Lentokonesuihkuturbiinimoottoriapumekaanikkoaliupseerioppilas, meaning Aeroplane jet turbine motor assistant mechanic non-commissioned officer in training.
<p class="break-normal ...">...</p>Break Words
Use break-words to add line breaks mid-word if needed.
A really long finnish word, that has nothing to do with warp technology, is Lentokonesuihkuturbiinimoottoriapumekaanikkoaliupseerioppilas, meaning Aeroplane jet turbine motor assistant mechanic non-commissioned officer in training.
<p class="break-words ...">...</p>Break All
Use break-all to add line breaks whenever necessary, without trying to preserve whole words.
A really long finnish word, that has nothing to do with warp technology, is Lentokonesuihkuturbiinimoottoriapumekaanikkoaliupseerioppilas, meaning Aeroplane jet turbine motor assistant mechanic non-commissioned officer in training.
<p class="break-all ...">...</p>