CSS3 word-break Property

Here is the brief explanation on how to specify line breaking rules in CSS3 using the CSS3 word-break property.

Explanation

Property :

word-break: normal|break-all|keep-all|initial|inherit;

Where,
normal - Default value. Break words according to their usual rules
break-all - Lines may break between any two letters
keep-all - Breaks are prohibited between pairs of letters
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.

Usage:


word-break: keep-all;
word-break: break-all;

Definition:

The CSS3 word-break property specifies line breaking rules.

It takes the following values.
  • normal : Default value.
  • keep-all : Don't allow word breaks for CJK (Chinese/Japanese/Korean) text. Non-CJK text behavior is the same as for normal.
  • break-all : Word breaks may be inserted between any character for non-CJK text.

Example 1:


<p style='word-break: keep-all; width: 140px;border: 1px solid grey;'>
This paragraph contains some text. This line will-break-at-hyphens.
</p>

Result:

This paragraph contains some text. This line will-break-at-hyphens.



Example 2:


<p style='word-break: break-all; width: 140px;border: 1px solid grey;'>
This paragraph contains some text. The lines will break at any character.
</p>

Result:

This paragraph contains some text. The lines will break at any character.




Ask Questions

Ask Question