CSS - word-break

Examples

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

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

.normal {
    word-break: normal;
}

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

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

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 <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> break-all <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> keep-all

Description  

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

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

Specifications  

License