word-break

The word-break CSS property specifies whether or not the browser should insert line breaks wherever the text would otherwise overflow its content box. In contrast to overflow-wrap, word-break 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).

/* Keyword values */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;
/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;

Syntax

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

[1] IE8 introduced -ms-word-break as a synonym for word-break. Don't use the -ms- prefix.

[2] See WebKit bug 123782.

[3] Note that no version of Internet Explorer supports the initial value.

See also

• word-wrap