The word-break
CSS property specifies whether or not the browser should insert line breaks wherever the text would otherwise overflow its content box.
In contrast to overflow-wrap
, word-break
will create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).
Syntax
/* Keyword values */ word-break: normal; word-break: break-all; word-break: keep-all; /* Global values */ word-break: inherit; word-break: initial; word-break: unset;
The word-break
property is specified as a single keyword chosen from the list of values below.
Values
normal
- Use the default line break rule.
break-all
- To prevent overflow, word breaks should be inserted between any two characters (excluding Chinese/Japanese/Korean text).
keep-all
- Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for
normal
.
Formal syntax
normal | break-all | keep-all
Examples
HTML
<p>1. <code>word-break: normal</code></p> <p class="normal narrow">This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p> <p>2. <code>word-break: break-all</code></p> <p class="breakAll narrow">This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p> <p>3. <code>word-break: keep-all</code></p> <p class="keep narrow">This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
CSS
.narrow { padding: 5px; border: 1px solid; width: 8em; } .normal { word-break: normal; } .breakAll { word-break: break-all; } .keep { word-break: keep-all; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Text Module Level 3 The definition of 'word-break' in that specification. |
Working Draft | Initial definition |
Initial value | normal |
---|---|
Applies to | all elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 15.0 (15.0) | 5.5[1,3] | 15 | (Yes) |
keep-all |
44 | No support | 15.0 (15.0) | 5.5 | 31 | 9 |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | (Yes) | 18.0 | (Yes) | 15.0 (15.0) | ? | No support | ? |
keep-all |
No support[2] | No support[2] | No support | 15.0 (15.0) | ? | No support | 9 |
[1] IE8 introduced -ms-word-break
as a synonym for word-break
. Don't use the -ms-
prefix.
[2] See WebKit bug 123782.
[3] Note that no version of Internet Explorer supports the initial
value.
[4] Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word
value which is treated like word-wrap: break-word
.