line-clamp

Description
Syntax
Examples
Links

Description

The line-clamp property for CSS is shorthand for max-lines, block-ellipsis, and continue.

Syntax

CSS

line-clamp: value;

JS

object.style.lineClamp = "value";

Values

<'line-clamp'> = none | <integer> <'block-ellipsis'>?

none

Sets max-lines to none, continue to auto, and block-ellipsis to none.

<integer>

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

<'block-ellipsis'> = none | auto | <string>

none

The rendering is unaffected.

auto

Render an ellipsis character (U+2026) or a more typographically-appropriate equivalent.

<string>

Specifies a sequence of characters delimited by double quotes (") or single quotes (').

Initial

none

<!doctype html>
<html>
<head>
    <style>
        p
        {
            -webkit-box-orient: vertical;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <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 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 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 integer integer integer integer</p>
</body>
</html>

2 · JS

<!doctype html>
<html>
<head>
    <style>
        p
        {
            -webkit-box-orient: vertical;
            display: -webkit-box;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="3">integer</button>
    <p>line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp line-clamp</p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            const mystyle = document.querySelector("p").style;
            mystyle.webkitLineClamp = myproperty;
            mystyle.lineClamp = myproperty;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>