The word-break
CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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: 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
'- 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).
Formal definition
Initial value | normal
|
Applies to | all elements |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
normal | break-all | keep-all | break-word
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 | Status | Comment |
---|---|---|
CSS Text Module Level 3The definition of 'word-break' in that specification. | Working Draft | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
word-break
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 15 |
IE Full support 5.5 Full support 5.5 Notes' No version of Internet Explorer supports the Prefixed' Implemented with the vendor prefix: -ms-
Notes' Don't use |
Opera
Full support 15 |
Safari
Full support 3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 15 |
Opera Android
Full support 14 |
Safari iOS
Full support 2 |
Samsung Internet Android
Full support 1.0 |
break-word
|
Chrome
Full support 1 |
Edge
Full support 79 |
Firefox
Full support 67 |
IE
No support No |
Opera
Full support 15 |
Safari
Full support 3 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 67 |
Opera Android
Full support 14 |
Safari iOS
Full support 2 |
Samsung Internet Android
Full support 1.0 |
keep-all
|
Chrome
Full support 44 |
Edge
Full support 12 |
Firefox
Full support 15 |
IE
Full support 5.5 |
Opera
Full support 31 |
Safari
Full support 9 |
WebView Android
Full support 44 |
Chrome Android
Full support 44 |
Firefox Android
Full support 15 |
Opera Android
Full support 32 |
Safari iOS
Full support 9 |
Samsung Internet Android
Full support 4.0 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.'
- See implementation notes.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
word-break by Mozilla Contributors is licensed under CC-BY-SA 2.5.