word-wrap

osbo.com | CSS | Properties | 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.

word-wrap: value;

object.style.wordWrap = "value";

<'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.

normal

<!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>

<!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>

<!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>

World Wide Web Consortium (W3C)

Syntax

CSS

JS

Values

Initial

Examples

normal

break-word

anywhere

JS

Links

Internal

External