widows

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

Syntax

CSS

widows: value;

JS

object.style.widows = "value";

Values

<'widows'> = <integer>

<integer>

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

<!doctype html>
<html>
<head>
    <style>
        div
        {
            columns: 3;
            widows: 4;
        }
        p:nth-of-type(2)
        {
            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>

2 · JS · Inline

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

3 · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        div
        {
            columns: 3;
        }
        p:nth-of-type(2)
        {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="4">integer</button>
    <div>
        <p>widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows</p>
        <p>widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows</p>
        <p>widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows</p>
        <p>widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows</p>
        <p>widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows widows</p>
    </div>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("div").style.widows = myparameter;
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            let myargument = myelement.innerHTML;
            if(myelement.value)
            {
                myargument = myelement.value;
            }
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>

Syntax

CSS

JS

Values

Initial

Examples

1 · integer

2 · JS · Inline

3 · JS · Internal

Links

Properties

External