orphans

The orphans CSS property specifies the minimum number of line boxes in a block container that must be left in a fragment before a break.

Syntax

CSS

orphans: value;

JS

object.style.orphans = "value";

Values

<'orphans'> = <integer>

<integer>

Specifies one or more decimal digits (0-9).

Initial

<!doctype html>
<html>
<head>
    <style>
        div
        {
            columns: 3;
            orphans: 4;
        }
        p:nth-of-type(4)
        {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <p>integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer</p>
        <p>integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer</p>
        <p>integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer</p>
        <p>integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer</p>
        <p>integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer integer</p>
    </div>
</body>
</html>

JS

<!doctype html>
<html>
<head>
    <style>
        div
        {
            columns: 3;
        }
        p:nth-of-type(4)
        {
            background-color: yellow;
        }
    </style>
    <script>
        function myfunction(myvar)
        {
            document.querySelector("div").style.orphans = myvar;
        }
    </script>
</head>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button>
    <button onmouseover="myfunction(value)" value="4">integer</button>
    <div>
        <p>orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans</p>
        <p>orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans</p>
        <p>orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans</p>
        <p>orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans</p>
        <p>orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans orphans</p>
    </div>
</body>
</html>

Syntax

CSS

JS

Values

Initial

Examples

integer

JS

Links

Internal

External