The word-break
CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.
word-break
Try it
Syntax
/* Keyword values */ word-break: normal; word-break: break-all; word-break: keep-all; word-break: break-word; /* deprecated */ /* Global values */ word-break: inherit; word-break: initial; word-break: revert; word-break: revert-layer; 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
. -
break-word
Deprecated -
Has the same effect as
word-break: normal
andoverflow-wrap: anywhere
, regardless of the actual value of theoverflow-wrap
property.
Note: In contrast to word-break: break-word
and overflow-wrap: break-word
(see overflow-wrap
), word-break: break-all
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).
Note: While word-break: break-word
is deprecated, it has the same effect, when specified, as word-break: normal
and overflow-wrap: anywhere
— regardless of the actual value of the overflow-wrap
property.
Formal definition
Initial value | normal |
---|---|
Applies to | all elements |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
Examples
HTML
<p>1. <code>word-break: normal</code></p> <p class="normal narrow">This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> <p>2. <code>word-break: break-all</code></p> <p class="breakAll narrow">This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> <p>3. <code>word-break: keep-all</code></p> <p class="keepAll narrow">This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p> <p>4. <code>word-break: break-word</code></p> <p class="breakWord narrow">This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
CSS
.narrow { padding: 10px; border: 1px solid; width: 500px; margin: 0 auto; font-size: 20px; line-height: 1.5; letter-spacing: 1px; } .normal { word-break: normal; } .breakAll { word-break: break-all; } .keepAll { word-break: keep-all; } .breakWord { word-break: break-word; }
Specifications
Specification |
---|
CSS Text Module Level 3 # word-break-property |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
word-break |
1
|
12
|
15
|
8
Don't use
-ms-word-break , which is a synonym for
word-break .
5.5
No version of Internet Explorer supports the
initial value.
|
15
|
3
|
≤37
|
18
|
15
|
14
|
2
|
1.0
|
break-word |
1
|
79
|
67
|
No
|
15
|
3
|
≤37
|
18
|
67
|
14
|
2
|
1.0
|
keep-all |
44
|
12
|
15
|
5.5
|
31
|
9
|
44
|
44
|
15
|
32
|
9
|
4.0
|
See also
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break