The word-break
property sets how words break at the end of a line.
By default, a line of text only breaks at a space or a hyphen position.
To insert hyphens (-) at the end of a break, add the hyphens property.
A narrow container with word-break
set to break-all
This setting breaks words at any position before it overflows.
This verylongtext will be broken.
<style>
.word-break {
width: 100px;
padding: 15px;
border: 1px solid orangered;
word-break: break-all;
}
</style>
<p class="word-break">This verylongtext will be broken.</p>
word-break: normal | break-all | keep-all | break-word | initial | inherit;
Value | Description |
---|---|
normal | Default. Uses default line break rules. |
break-all | Words don't wrap and are broken at any character when they reach the end of the line. |
keep-all |
For Chinese, Japanese, and Korean text words are not broken. For other languages this is the same as normal. |
break-word | Words wrap and may be broken at arbitrary points, if necessary. |
initial | Sets the value to its default value. |
inherit | Inherits the value from its parent element. |
Click the buttons to see the different word-break
values.
This verylongtext will be broken.
<style>
.word-break-example {
width: 100px;
padding: 15px;
border: 1px solid orangered;
word-break: normal;
}
</style>
<p class="word-break-example">
This verylongtext will be broken.
</p>
This table shows when word-break
support started for each browser.
![]() Chrome
|
4.0 | Jan 2010 |
![]() Firefox
|
15.0 | Aug 2012 |
![]() IE/Edge
|
5.5 | Jul 2000 |
![]() Opera
|
15.0 | May 2013 |
![]() Safari
|
3.1 | Mar 2008 |