word-break

Theword-break CSS property specifies whether or not the browser should insert line breaks wherever the text would otherwise overflow its content box.

Syntax

/* Keyword values */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;

/* 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.

Formal syntax

normal | break-all | keep-all

Examples

HTML

<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">This is a long and
  Supercalifragilisticexpialidocious sentence.
  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p> 

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">This is a long and
  Supercalifragilisticexpialidocious sentence.
  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p> 

<p>3. <code>word-break: keep-all</code></p>
<p class="keep narrow">This is a long and
  Supercalifragilisticexpialidocious sentence.
  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>

CSS

.narrow {
  padding: 5px;
  border: 1px solid;
  width: 8em;
}

.normal {
  word-break: normal;
}

.breakAll {
  word-break: break-all;
}

.keep {
  word-break: keep-all;
}

Specifications

Browser compatibility

See also

• overflow-wrap