CSS - word-wrap Property

Quiz

The word-wrap Property

The word-wrap property is used to control the breaking and wrapping of long words onto the next line. This property ensures that content remains inside its container instead of overflowing outside the container.

Syntax

The syntax for the CSS word-wrap property is as follows:

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

Property Values

Property	Description
normal	It is the default value where words break at normal break points only, and overflows if necessary.
break-word	It allows words to break at unexpected points so that words can fit the container.
initial	It is used to set this property to its default value.
inherit	It is used to inherit the property of its parent element.

Prevent Overflow with word-wrap Property

You can use the word-wrap property to break and wrap the text onto the next line without overflowing outside the container.

Example

In this example, we have used the word-wrap: break-word; property to prevent the long word from overflowing.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS word-wrap Property</title>
    <style>
        .container {
            width: 200px;
            border: 1px solid #031926;
            padding: 10px;
        }
        .txt {
            word-wrap: break-word;
            background-color: #04af2f;
            padding: 10px;
            color: white;
            font-family: Verdana, sans-serif;
        }
    </style>
</head>
<body>
    <h2>CSS word-wrap Property</h2>
    <div class="container">
        <div class="txt">
            ThisIsASingleWordAndItWillWrapItselfToNextLineRatherThanOverflowingOutOfTheContainer.
        </div>
    </div>
</body>
</html>

Prevent Word Breaks with word-wrap Property

You can control whether words should break onto a new line or remain unbroken within a container. Using the word-wrap property with normal value allows the words to overflow outside the container.

Example

In this example, we have used the word-wrap: normal; property to prevent words from breaking and wrapping onto a new line.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS word-wrap Property</title>
    <style>
        .container {
            word-wrap: normal;
            width: 200px;
            border: 1px solid #031926;
            background-color: #04af2f;
            font-family: Verdana, sans-serif;
        }
    </style>
</head>
<body>
    <h2>CSS word-wrap Property</h2>
    <div class="container">
        ThisIsASingleWordAndItWillWrapItselfToNextLineRatherThanOverflowingOutOfTheContainer.
    </div>
</body>
</html>

Supported Browsers

Property
word-wrap	4	5.5	3.5	3.1	10.5

Print Page