When a word does not fit its container it wraps onto the next line.
The word-wrap
property specifies how words break and wrap.
It does not specify where the break occurs; for that you use <wbr>.
A narrow container with word-wrap
set to break-word
.
Long words are broken and wrapped over separate lines.
This veryverylongword will be broken
<style>
.word-wrap {
word-wrap: break-word;
width: 100px;
padding: 15px;
border: solid 1px tomato;
}
</style>
<p class="word-wrap">
This veryverylongword
will be broken
</p>
word-wrap: normal | break-word | initial | inherit;
Value | Description |
---|---|
normal |
The default. Break words only at allowed break points. |
break-word |
Forces unbreakable words to be broken. |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
The word-wrap
property does not specify where the break occurs.
For this, we can use a <wbr> tag which defines a word break opportunity.
This tag suggests to the browser where to break (i.e., wrap) a word.
A narrow container with <wbr> tags and a word-wrap
setting.
The long word wraps at the specified locations.
This very
<style>
.word-wrap {
word-wrap: break-word;
width: 95px;
padding: 15px;
border: solid 1px tomato;
}
</style>
<p class="word-wrap">
This very<wbr />very<wbr />long<wbr />word
will be broken.
</p>
Tip: A different CSS property, word-break, also specifies how to break words, but not with the accuracy that the <wbr> tag offers.
This table shows when word-wrap
support started for each browser.
Chrome
|
4.0 | Jan 2010 |
Firefox
|
3.5 | Jun 2009 |
IE/Edge
|
5.5 | Jul 2000 |
Opera
|
10.5 | Mar 2010 |
Safari
|
3.1 | Mar 2008 |