CSS word-wrap Property

The 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.

Syntax

This is the formal syntax for using CSS word-wrap property.

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;

Acceptable Values

normal

This value indicates that lines may only break at normal word break points.

break-word

This value indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

Working Examples

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

Browser Support

The CSS 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.

Further Reading

  1. Read more about the CSS <word-wrap> property on MDN.
  2. You can also read the CSS <word-wrap> 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