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

1 · 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>

2 · 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>

3 · normal

4 · JS · Inline

<!doctype html>
<html>
<head>
    <style>
        p
        {
            background-color: yellow;
            width: 20px;
        }
    </style>
</head>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button>
    <button onmouseover="myfunction(innerHTML)">anywhere</button>
    <button onmouseover="myfunction(innerHTML)">break-word</button>
    <button onmouseover="myfunction(innerHTML)">normal</button>
    <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>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("p").style.wordWrap = myparameter;
        }
    </script>
</body>
</html>

5 · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        p
        {
            background-color: yellow;
            width: 20px;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>anywhere</button>
    <button>break-word</button>
    <button>normal</button>
    <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>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("p").style.wordWrap = myparameter;
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            myelement.addEventListener("mouseover", function(){myfunction(myelement.innerHTML)});
        }
    </script>
</body>
</html>