CSS word-break Property

The CSS word-break property is used to specify whether or how the browser should break lines within words. Lines that don’t fit inside their container break in certain points. These points are generally either a white space or a hyphen.

The initial value of word-break property is normal. You can apply it to all elements. This property can be inherited, which means all elements that are children of a given element will also have the same value for word-break property as the parent element. The final computed value of the word-break property is the exact same value that you initially supplied. This property is not animatable. The transition between different values will be sudden.

Syntax

This is the formal syntax for using word-break property.

word-break: normal | break-all | keep-all

Here are some examples of using this property.

/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;

/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;

Acceptable Values

normal

This value indicates that lines should break according to their usual rules.

break-all

This value indicates that in addition to normal breaking rules, lines may also break between any two letters (except where forbidden by the line-break property). In this case, word breaks may be inserted between any character for non-CJK (Chinese/Japanese/Korean) text.

keep-all

This value indicates that word breaks are not allowed for CJK text. Non-CJK text behavior is the same as for normal.

Working Examples

See the Pen CSS word-break Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The CSS3 word-break property is fully supported in 80.9% browsers and partially supported in 13.86% browsers. Therefore, its overall browser support is 94.76%. This property is partially supported in Chrome 4+, Safari 4+, Opera 15+, iOS Safari 8+ and Android 3+. Partial support refers to supporting the break-all value, but not the keep-all value.

This property is fully supported in IE 6+, Edge 12+, Firefox 15+, Chrome 44+, Safari 9+, Opera 31+, iOS Safari 9.0-9.2+, Android 53+ and Chrome for Android 56+.

Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.

Browser support data has been taken from caniuse.com.

Further Reading

  1. Read more about the CSS <word-break> property on MDN.
  2. You can also read the CSS <word-break> property on CSSWG.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top