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.

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

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




Related articles