X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS max-lines Property

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

The max-lines property creates clamping effect with block-overflow property.

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 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.

This property is in progress.

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 using CSS 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>

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.

Browser support

14.0+ 17.0+ 1.0+ 5.0+ 15.0+


Do you find this helpful?

Related articles