CSS word-wrap Property

When a word does not fit its container it wraps onto the next line.

The word-wrap property specifies how words break and wrap.

It does not specify where the break occurs; for that you use <wbr>.

Example

#

A narrow container with word-wrap set to break-word.
Long words are broken and wrapped over separate lines.

This veryverylongword will be broken

<style>
  .word-wrap {
    word-wrap: break-word;
    width: 100px;
    padding: 15px;
    border: solid 1px tomato;
  }
</style>

<p class="word-wrap">
  This veryverylongword
  will be broken
</p>

Syntax

word-wrap: normal | break-word | initial | inherit;

Values

#

Value Description
normal The default. Break words only at allowed break points.
break-word Forces unbreakable words to be broken.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Did you know?

Did you know?

Specifying where to break a word

The word-wrap property does not specify where the break occurs.

For this, we can use a <wbr> tag which defines a word break opportunity.

This tag suggests to the browser where to break (i.e., wrap) a word.

A narrow container with <wbr> tags and a word-wrap setting.
The long word wraps at the specified locations.

This veryverylongword will be broken.

<style>
  .word-wrap {
    word-wrap: break-word;
    width: 95px;
    padding: 15px;
    border: solid 1px tomato;
  }
</style>

<p class="word-wrap">
  This very<wbr />very<wbr />long<wbr />word
  will be broken.
</p>

Tip:  A different CSS property, word-break, also specifies how to break words, but not with the accuracy that the <wbr> tag offers.


Browser support

This table shows when word-wrap support started for each browser.

Chrome
4.0 Jan 2010
Firefox
3.5 Jun 2009
IE/Edge
5.5 Jul 2000
Opera
10.5 Mar 2010
Safari
3.1 Mar 2008

You may also like

Guides