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 3 The 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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
word-break | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 15 | IE
Full support
5.5
| 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.