Theword-break
CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.
/* Keyword values */ word-break: normal; word-break: break-all; word-break: keep-all; word-break: break-word; /* non-standard */ /* 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.
normal
break-all
keep-all
normal
.break-word
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).
normal | break-all | keep-all | break-word
<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>
.narrow { padding: 5px; border: 1px solid; display: table; max-width: 100%; } .normal { word-break: normal; } .breakAll { word-break: break-all; } .keepAll { word-break: keep-all; } .breakWord { word-break: break-word; }
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 15 | 5.5
|
15 | Yes |
keep-all |
44 | Yes | 15 | 5.5 | 31 | 9 |
break-word |
Yes | Yes | No | No | Yes | Yes |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | 18 | Yes | 15 | No | ? | Yes |
keep-all |
Yes | Yes | No | 15 | No | 9 | Yes |
break-word |
Yes | Yes | No | No | Yes | Yes | Yes |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break