This tutorial will help you understand the word wrap behavior of CSS and how to use it in your HTML documents.
word-wrap property is commonly used to keep a line of text stays inside its container element by breaking long words into the next line.
By default, a long word without any space between will push through the width of the container if not broken.
The following HTML document creates a
<p> tag with a width and visible borders:
<p style="width: 120px; border: 1px solid black">Loremipsumdolorsitamet</p>
The output will be as follows. Notice how the words ran past through the visible borders:
To avoid the text from overflowing outside the borders, you can use the
word-wrap property that accepts 4 possible values as shown below:
normal value is the default value where a text will break only when there’s one or more spaces or special characters.
break-word value will cause the text to break at the end of the container’s width:
<p style=" width: 120px; border: 1px solid black; word-wrap: break-word;"> Loremipsumdolorsitamet </p>
The HTML output will be as follows:
And that’s how you use the
word-wrap CSS property.