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

CSS Text Level 3, Section 6.2

Related specifications

CSS Text Module Level 3: W3C Recommendation

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]