word-wrap

The word-wrap CSS property specifies whether the user agent may break at otherwise disallowed points within a line to prevent overflow, when an otherwise-unbreakable string is too long to fit within the line box.

Syntax

CSS

word-wrap: value;

JS

object.style.wordWrap = "value";

Values

<'word-wrap'> = normal | break-word | anywhere

normal

Lines may break only at allowed break points.

break-word

As for anywhere except soft wrap opportunities introduced by break-word are not considered when calculating min-content intrinsic sizes.

anywhere

An otherwise unbreakable sequence of characters may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line.

Initial

normal

Examples

normal

break-word

<!doctype html>
<html>
<head>
    <style>
        p {
            background-color: yellow;
            width: 20px;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <p>break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word</p>
</body>
</html>

anywhere

<!doctype html>
<html>
<head>
    <style>
        p {
            background-color: yellow;
            width: 20px;
            word-wrap: anywhere;
        }
    </style>
</head>
<body>
    <p>anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere</p>
</body>
</html>

JS

<!doctype html>
<html>
<head>
    <style>
        p {
            background-color: yellow;
            width: 20px;
        }
    </style>
    <script>
        function mouseover(value) {
            document.getElementsByTagName("p")[0].style.wordWrap = value;
        }
    </script>
</head>
<body>
    <input onmouseover="mouseover(value)" type="button" value="normal">
    <input onmouseover="mouseover(value)" type="button" value="break-word">
    <input onmouseover="mouseover(value)" type="button" value="anywhere">
    <p>word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap</p>
</body>
</html>