line-break

The line-break CSS property specifies the strictness of line-breaking rules applied within an element: especially how wrapping interacts with punctuation and symbols.

Syntax

CSS

line-break: value;

JS

object.style.lineBreak = "value";

Values

<'line-break'> = auto | loose | normal | strict | anywhere

auto

Automatically specified by the user agent.

loose

Breaks text using the least restrictive set of line-breaking rules.

normal

Breaks text using the most common set of line-breaking rules.

strict

Breaks text using the most stringent set of line-breaking rules.

anywhere

There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the GL, WJ, or ZWJ character class or mandated by the word-break property. The different wrapping opportunities must not be prioritized. Hyphenation is not applied.

Initial

auto

Examples

anywhere

<!doctype html>
<html>
<head>
    <style>
        p
        {
            line-break: 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>

auto

loose

normal

strict

JS

<!doctype html>
<html>
<head>
    <script>
        function myfunction(myvar)
        {
            document.querySelector("p").style.lineBreak = myvar;
        }
    </script>
</head>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button>
    <button onmouseover="myfunction(innerHTML)">anywhere</button>
    <button onmouseover="myfunction(innerHTML)">auto</button>
    <button onmouseover="myfunction(innerHTML)">loose</button>
    <button onmouseover="myfunction(innerHTML)">normal</button>
    <button onmouseover="myfunction(innerHTML)">strict</button>
    <p>line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break</p>
</body>
</html>