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.
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;
This value indicates that lines should break according to their usual rules.
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.
This value indicates that word breaks are not allowed for CJK text. Non-CJK text behavior is the same as for normal.
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
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
Browser support data has been taken from caniuse.com.
- Read more about the CSS
<word-break>property on MDN.
- You can also read the CSS
<word-break>property on CSSWG.
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.