The word-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; /* deprecated */  /* Global values */ word-break: inherit; word-break: initial; word-break: revert; word-break: unset; 

word-break

The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.

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: 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 and overflow-wrap: anywhere, regardless of the actual value of the overflow-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
CSS Text Module Level 3 # word-break-property

See also

overflow-wrap hyphens line-break Guide to wrapping and breaking text

Last modified: Jan 25, 2022, by MDN contributors

Select your preferred language English (US)DeutschFrançais日本語한국어Português (do Brasil)Русский中文 (简体) Change language