line-break

Description
Syntax
Examples
Links

Description

The line-break property for CSS 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

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

2 · auto

3 · loose

4 · normal

5 · strict

6 · JS

<!doctype html>
<html>
<body>
    <button>initial</button>
    <button>anywhere</button>
    <button>auto</button>
    <button>loose</button>
    <button>normal</button>
    <button>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>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("p").style.lineBreak = myparameter.target.innerHTML;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>