word-break

The word-break CSS property is used to specify whether to break lines within words.

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;

Values

normal

Use the default line break rule.

break-all

Word breaks may be inserted between any character for non-CJK (Chinese/Japanese/Korean) text.

keep-all

Don't allow word breaks for CJK text. Non-CJK text behavior is the same as for normal.

Formal syntax

normal | break-all | keep-all

Examples

HTML Content

<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 Content

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

.normal {
    word-break: normal;
}

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

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

Specifications

Specification	Status	Comment
CSS Text Level 3 The definition of 'word-break' in that specification.	Working Draft	Initial definition

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.

See also

• word-wrap