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

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

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

Browser Support

Desktop
5.5	12	1	15	15	3
Tablets / Mobile
≤37	18	15	14	2	1.0

Last updated by CSSPortal on: 1st November 2019