CSS property word-wrap (or overflow-wrap) specifies whether the Browser may break within a word to prevent overflow when an unbreakable string is too long to fit within the line box. It only has an effect when ‘white-space’ allows wrapping.
Note that word-wrap is legacy name for overflow-wrap. But Firefox supports word-wrap better. So we’ll use word-wrap for the purpose of this tutorial.
CSS property word-wrap
| CSS version: | CSS 3 |
| Value: | normal | break-word |
| Initial: | normal |
| Inherited: | yes |
| Animatable: | no |
word-wrap values
| normal | Lines may break only at allowed break points. A word longer that line box will not break other than allowed break points. |
| word-break | Word may break at any point. If there are break points, then first attempt is to break at those points. |
Example – normal and break-word word-wrap
In this example word is longer than line box.
- For word-wrap=normal case, it will only break and wrap at natural break points (like dash).
- For word-wrap=break-word case, it will break and wrap even if there is no natural break point (like dash). Note that first attempt is still made to break at natural break point.
In the following code, CSS property word-wrap can be changed to the following values
- normal
- break-word
<style>
.box {
width: 100px;
background-color: lightgreen;
word-wrap: normal;
}
</style>
<div class="box">
veryvery-veryveryverylongword
</div>word-wrap refresh
