CSS max-lines Property

The CSS max-lines property is used to limit a block content to a maximum number of lines before being cropped out.

The max-lines property can create a clamping effect with the block-overflow property.

This property is in progress.

Let’s remember that the line-clamp property is a shorthand for the max-lines and the block-overflow properties.

The max-lines property is not currently supported by all browsers, but you can get support using the WebKit’s proprietary implementation of the line-clamp property.

The max-lines property is also called "limiting visible lines", because the content falling within the maximum number of lines isn’t rendered by the browser. Let’s discuss the content that is cut into fragments by the CSS max-lines property. Here we have two fragments: one rendered in view and another one that is not rendered and is out of view. As a result, the box containing the current content captures the fragmented part, passing it to another box which belongs to a CSS Region.

Negative values are invalid.

Initial Value	none
Applies to	Fragment boxes.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.maxLines = "2";

Syntax

max-lines: none | <integer> | initial | inherit;

Example of the max-lines property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        overflow: hidden;
        box-sizing: content-box;
        width: 300px;
        font-size: 16px;
        line-height: 24px;
        font-family: Helvetica, sans-serif;
        max-lines: 3;
      }
    </style>
  </head>
  <body>
    <h2>Max-lines property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </body>
</html>

Try it Yourself »

Values

Value	Description
none	No maximum number of lines is specified.
<integer>	Sets the number of lines before content is discarded. Negative values are invalid.
initial	Sets the property to its default value.
inherit	Inherits the property from its parent element.