This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

word-wrap

Summary

An alias of css/properties/overflow-wrap, word-wrap defines whether to break words when the content exceeds the boundaries of its container.

Overview table

Initial value
normal
Applies to
All elements
Inherited
Yes
Media
visual
Computed value
specified value
Animatable
No
CSS Object Model Property
wordWrap

Syntax

  • word-wrap: break-word
  • word-wrap: normal

Values

normal
Default. Lines can only be broken at normal break points (spaces, non-alphanumeric characters, etc.).
break-word
Words that exceed the width of the container will be arbitrarily broken to fit within the container’s bounds.

Examples

This is the style rule that applies to the example.

.NormalValue        { word-wrap:normal;     background-color:lightgray; }
.WithBreaks         { word-wrap:break-word; background-color:lightgray; }
.NormalValueNarrow  { word-wrap:normal;     background-color:lightgray; width:10px }
.WithBreaksNarrow   { word-wrap:break-word; background-color:lightgray; width:10px }
.WithBreaksNoWrap    { word-wrap:break-word; background-color:lightgray; width:10px; white-space:nowrap; }
.clsLiteral          { font-family: Courier New, Courier, monospace; }

View live example

The following examples show how the css/properties/word-wrap property can be used to break one long word into multiple words on multiple lines. The break-word value avoids horizontal scrolling and can be useful for printing.

<!doctype html>
<html>
<head>
<title>wordWrap property</title>
</head>

<body>
<div class="body">

<h1>wordWrap property</h1>
<p>
<strong>Note</strong> that the <strong>"p"</strong> elements in the examples have layout because their widths are set.
</p>

<hr />

<p>
These examples shows the <span class="clsLiteral">break-word</span> value of the <strong>wordWrap</strong> property.
</p>

<p class="WithBreaks">
LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord
</p>

<p class="WithBreaksNarrow">
blonde
</p>

<hr />
<p>
These examples show the <span class="clsLiteral">normal</span> value of the <strong>wordWrap</strong> property.
In quirks mode (transitional DOCTYPE), the field width is extended to fit the word.
</p>

<p class="NormalValue">
LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord
</p>

<p class="NormalValueNarrow">
blonde
</p>

<hr />

<p>
These examples show the <span class="clsLiteral">break-word</span> value of the
<strong>wordWrap</strong> property with <span class="clsLiteral">white-space:nowrap</span>.
</p>

<p class="WithBreaksNoWrap">
Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word Long Word
</p>

<p class="WithBreaksNoWrap">
blonde
</p>

<hr />

<p>
To clip unwrapped text to the space provided, you can use <span class="clsLiteral">overflow:hidden</span>
and <span class="clsLiteral">text-overflow:ellipsis</span>.
</p>

<p class="NormalValue" style="overflow:hidden">
LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord
</p>

<p class="NormalValue" style="overflow:hidden;text-overflow:ellipsis">
LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord
</p>

<hr/>
</div>

</body>
</html>

View live example

Notes

Remarks

The word-wrap property was originally a proprietary property developed for Internet Explorer, and is used as a synonym for the standardized overflow-wrap property. This property to enables the browser to break up otherwise unbreakable strings (words). This differs from the white-space property, which turns wrapping of the text on and off. The word-wrap property specifies only whether wrapping can occur at a place in the word that is not otherwise allowed by the language rules in effect.

Standards information

Related specifications

CSS Text Module Level 3
W3C Recommendation

Attributions