word-wrap
Specifies whether line breaks are allowed in the middle of words.
Sample Code
p.test { word-wrap: normal;}
p.test1 { word-wrap: break-word;}
Available Values
| Value | Description |
|---|---|
| normal | Does not break words in the middle. This 'normal' is the initial value. |
| break-word | Breaks lines to fit within the containing element's width, regardless of whether the break occurs in the middle of a word. |
Browser Display Result
<p style="word-wrap: normal; width: 300px; border: solid 1px;">This is a p element. 'word-wrap: normal' is specified. this is a pen. Abcdefghijklmnopqrstuvwxyz AbcdefghijklmnopqrstuvwxyzAbcdefghijklmnopqrstuvwxyz</p>
<p style="word-wrap: break-word; width: 300px; border: solid 1px;">This is a p element. 'word-wrap: break-word' is specified. this is a pen. Abcdefghijklmnopqrstuvwxyz AbcdefghijklmnopqrstuvwxyzAbcdefghijklmnopqrstuvwxyz</p>
Browser Compatibility
Desktop
Chrome23+ ○
22 △21 △20 △19 △18 △17 △16 △15 △↑ Supported as 'word-wrap'
Firefox49+ ○
48 △47 △46 △45 △44 △43 △42 △41 △↑ Supported as 'word-wrap'
2 and earlier ×
Safari7+ ○
6 △5 △4 △3 △2 △1 △↑ Supported as 'word-wrap'
Edge18+ ○Supported in all versions
IE11 △10 △9 △
8 △7 △
6 △
Opera12.1+ ○
11 △↑ Supported as 'word-wrap'
9 and earlier ×Mobile
iOS Safari7+ ○6 △5 △4 △3 △2 △1 △↑ Supported as 'word-wrap'
Android Browser4.4+ ○1 △ Chrome AndroidLatest ○Same support as desktop
Firefox AndroidLatest ○Same support as desktop
Details
Specifies whether line breaks are allowed in the middle of words.
Note that in addition to 'word-wrap', there are also the 'word-break' and 'overflow-wrap' properties, which also control whether words can be broken mid-word.
The 'word-break' property was originally introduced by IE, while 'overflow-wrap' is the renamed version of 'word-wrap' as proposed in the CSS specification.
For current browsers, specifying just the 'word-wrap' property should be sufficient.
If you find any errors or copyright issues, please contact us.
シェアする