word-wrap

< css‎ | properties
Jump to: navigation, search

word-wrap

This article is Ready to Use.


W3C Recommendation

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.

Compatibility

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
1.0
Yes
?
Unknown
5.5
Yes
10.5
Yes
1.0
Yes

Mobile

FeaturesAndroidFirefox MobileIE MobileOpera MobileSafari Mobile
Basic support
1.0
Yes
1.0
Yes
?
Unknown
?
Unknown
1.0
Yes


Examples

View live exampleThis is the style rule that applies to the example.

CSS

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

HTML

<!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>

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

Specification Status Related Changes
CSS Text Module Level 3 W3C Recommendation

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 1.0
3.5
5.5
10.5
1.0

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support 1.0
?
?
1.0
?
?
?
1.0

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]