CSS word-break Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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