CSS word-break Property

Description

The word-break property controls the line breaking behavior within words. It is especially useful in cases where multiple languages are used within an element.

Initial value: normal
Applies to: All elements
Inherited: Yes
Media: Visual
Computed value: Specified value
Animatable: No
CSS Version: CSS3
JavaScript syntax: object.style.wordBreak

Syntax

word-break: normal | keep-all | break-all

Values

normalWords break according to their usual rules.
keep-allImplicit soft wrap opportunities between letters are suppressed, i.e. breaks are prohibited between pairs of letters (except where opportunities exist due to dictionary-based breaking). Otherwise this option is equivalent to normal. In this style, sequences of CJK characters do not break.
break-allIn addition to normal soft wrap opportunities, lines may break between any two letters (except where forbidden by the line-break property). Hyphenation is not applied. This option is used mostly in a context where the text is predominantly using CJK characters with few non-CJK excerpts and it is desired that the text be better distributed on each line.

Example

HTML

<div class="test"> 

   <p><b>Block with a normal value</b></p>As the saying goes: 酒 を 飲 む と 打 ち 解 け て 来 る<br>Which in translation from Japanese means: "when you drink sake, you become open." 

</div> 

<div class="test2"> 

   <p><b>Block with a value of break-all</b></p>As the saying goes: 酒 を 飲 む と 打 ち 解 け て 来 る<br>Which in translation from Japanese means: "when you drink sake, you become open." 

</div> 

<br> 

<div class="test3"> 

   <p><b>Block with the value keep-all</b></p>As the saying goes: 酒 を 飲 む と 打 ち 解 け て 来 る<br>Which in translation from Japanese means: "when you drink sake, you become open." 

</div>

CSS

div {
   display: inline-block; 
   background: azure; 
   border: 1px solid gray;
} 
.test {
   width: 240px; 
   word-break: normal;
   margin-right: 150px; 
} 
.test2 {
   width: 250px;
   word-break: break-all;
   margin-right: 150px; 
} 
.test3 {
   width: 150px; 
   word-break: keep-all; 
   margin-top: 10px;
}

Result