CSS word-wrap Property

❮ Previous Reference Next ❯


.example1 {
  word-wrap: normal;
  width: 50px;
  border: 1px solid black

.example2 {
  word-wrap: break-word;
  width: 50px;
  border: 1px solid black


The word-wrap property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.

Note: In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

This property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrap being an alias.

Default value:normal
JavaScript syntax:

Standard Syntax

word-wrap: normal|anywhere|break-word|initial|inherit|revert|revert-layer|unset;

Browser Support

The numbers in the table specify the first browser version that fully supports the property.


Property Values

The following table describes the values of this property.

Value Description
normal This is default value. Lines may only break at normal word break points.
anywhere To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line. No hyphenation character is inserted at the break point. Soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes.
break-word Sets unbreakable word to wrap in a new line in order to prevent overflow, if there are no acceptable break points in the line.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  word-wrap: normal;
❮ Previous Reference Next ❯