CSS word-wrap Property

The overflow-wrap CSS property is only applicable to inline elements, and it specifies whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.

The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and it was implemented with the same name by most browsers. It was later renamed overflow-wrap, with word-wrap serving as an alias.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
    p {
        width: 150px;
        border: 1px solid black;
    }
    .ex1 {
        word-wrap: normal;
    }
    .ex2 {
        word-wrap: break-word;
    }
</style>
</head>
<body>

<h2>word-wrap: normal (default)</h2>
<p class="ex1"> This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will not break and wrap to the next line.</p>

<h2>word-wrap: break-word</h2>
<p class="ex2"> This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>
</html>

Preview

Property Values

Value	Description
normal	Break words only at the permitted break points. This is the default setting.
break-word	Allows for the breaking of unbreakable words
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
word-wrap	4.0	3.5	3.1	5.5	10.5

word-spacing

writing-mode

CSS word-wrap Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us