CSS word-break Property

Description

The word-break CSS property controls whether words are broken at the end of a line. By default, words are only broken at certain points, such as between two words or at a hyphen. However, the word-break property can be used to allow words to be broken at any point, or to prevent words from being broken at all.

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

Interactive Demo

word-break: normal;

word-break: break-all;

word-break: keep-all;

The rusty swing set creaked a lonely lullaby in the twilight, lets add a very long word here - Pneumonoultramicroscopicsilicovolcanoconiosis, shadows lengthening like grasping fingers across the dew-kissed grass.

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

Editor