CSS word-break

The word-break property can be used to change line by breaking words between letters. This is like forcing the line break in between a word, because normally line break occurs where there is a white space or a hyphen.

This property can be used to break a long URL which extends the width of the parent element. It is also useful in cases where user generates the content which can exceed the parent element's width. This property specifies breaking words for non-CJK scripts (CJK scripts are Chinese, Japanese and Korean scripts).

CSS

word-break: value;

This property takes the following values.

Values

normal : This is the default value. Words break according to their usual rules.

break-all : Words may break between letters for non-CJK.

keep-all : Word breaks are not allowed for CJK text. In all the other cases, it is same as normal.

initial : Sets the default value.

inherit : Inherits value from parent element.

Examples

The following example illustrates the effect of the above-mentioned values.

HTML

<p>This paragraph contains text which has numerous breakable words.</p>

<p id="break">This paragraph contains text which has numerous breakable words.</p>

CSS

p {
  width: 110px;
  border: solid 1px #222;
}

#break {
  word-break: break-all;
}

See the Pen Word Break Property by Aakhya Singh (@aakhya) on CodePen.

In the above example, giving word-break: break-all broke the words so as to prevent any white space between the margin and the text.

Look at another example where the word break occurred to fit a long word within a given width.

HTML

<p>Normally, browser will not break the URL https://www.codesdope.com/blog/ to start a new line.</p>

<p id="break">On giving the break-all value to the word-break property, browser will break the URL https://www.codesdope.com/blog/ to start a new line.</p>

CSS

p {
  width: 110px;
  border: solid 1px #222;
}

#break {
  word-break: break-all;
}

See the Pen Word Break Property by Aakhya Singh (@aakhya) on CodePen.

The next example shows the use of the keep-all value on normal and CJK text as mentioned in its description.

HTML

<p>This para contains a long text assassinationofthewildinthewildforest and another text 
这是一段文本中的一些中文文本如果行更改</p>

<p id="break1">This para contains a long text assassinationofthewildinthewildforest and another text 
这是一段文本中的一些中文文本如果行更改</p>

<p id="break2">This para contains a long text assassinationofthewildinthewildforest and another text 
这是一段文本中的一些中文文本如果行更改</p>

CSS

p {
  width: 200px;
  border: solid 1px #222;
}

#break1 {
  word-break: break-all;
}

#break2 {
  word-break: keep-all;
}

See the Pen Word Break property with long English and Chinese words by Aakhya Singh (@aakhya) on CodePen.

To get full support across all the browsers, you need to use vendor prefixes.

CSS

-ms-word-break: value;
    word-break: value;

Another alternative to bring out such an effect of breaking words is to use the word-wrap property in conjunction with the hyphens property, in which the latter adds hyphens at the points where words have been broken.

Browser Support

This property is supported in most of the browsers. iOS Safari support the break-all value but not the keep-all value. Some Webkit and Blink browsers like Chrome and Safari also support a non standard break-word value which is given as word-wrap: break-word.