word-wrap property is used to specify if the browser may or may not break lines within words that are too long to fit in their containing box without overflow. These words would not be breakable by default.
The real name for this property is
overflow-wrap. The name
word-wrap exists for legacy reasons. However, both of them are perfectly acceptable.
The initial value of
word-wrap 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-wrap property as the parent element. The final computed value of the
word-wrap property is the exact same value that you initially supplied. This property is not animatable. The transition between different values will be sudden.
This property may seem similar to the
word-break property but they are very different. The
word-break property is used to break a line in between two characters of a word which comes at the end of this line, to make the whole line fit inside its container. However,
word-wrap is used to break a word when the word itself takes up an entire line and overflows that line.
This is the formal syntax for using CSS
word-wrap: normal | break-word
Here are some examples of using this property.
/* Keyword values */ overflow-wrap: normal; overflow-wrap: break-word; /* You can use either overflow-wrap or word-wrap */ word-wrap: normal; word-wrap: break-word; /* Global values */ overflow-wrap: inherit; overflow-wrap: initial; overflow-wrap: unset;
This value indicates that lines may only break at normal word break points.
This value indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.
word-wrap property works in all major browsers like Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS. However, the alternate property name (
overflow-wrap) is only supported in recent browsers.
- Read more about the CSS
<word-wrap>property on MDN.
- You can also read the CSS
<word-wrap>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.