CSS overflow-wrap Property

When the original string is too long to fit, the overflow-wrap property in CSS specifies that the browser may break lines of text inside any targeted element to prevent overflow. This property was previously known as word-wrap, and while it is still supported by some browsers, it was renamed overflow-wrap in a CSS3 draft.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
    div {
        width: 125px;
        border: 1px solid #00ab55;
    }
    .ex1 {
        overflow-wrap: normal;
    }
    .ex2 {
        overflow-wrap: break-word;
    }
    .ex3 {
        overflow-wrap: anywhere;
    }
</style>
</head>
<body>

<h2>overflow-wrap: normal (default)</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consect etueradipiscingelit,seddiamnonummynibheuismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow-wrap: break-word</h2>
<div class="ex2">Lorem ipsum dolor sit amet, consect etueradipiscingelit,seddiamnonummynibheuismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

<h2>overflow-wrap: anywhere</h2>
<div class="ex3">Lorem ipsum dolor sit amet, consect etueradipiscingelit,seddiamnonummynibheuismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

</body>
</html>

Preview

Property Values

Value	Description
normal	Long words will not break, even if they exceed the container's capacity. This is the default setting.
anywhere	Long words will break if they exceed the container's capacity.
break-word	Long words will break if they exceed the container's capacity.
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
overflow-wrap	23.0	49.0	6.1	18.0	12.1

overflow

overflow-x

CSS overflow-wrap Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us