CSS max-lines Property

The CSS max-lines property limits the number of visible lines in a block container. Once the content grows past that limit, the extra lines are removed from view, and the container's overflow handling decides what happens to them. In practice you pair max-lines with block-overflow: clamp so the text is cut off cleanly at the line boundary instead of being chopped mid-character.

When would I use it?

The classic use case is a multi-line "read more" teaser: a card, news snippet, or product description that must never grow taller than, say, three lines no matter how long the source text is. Without a line limit, a long paragraph pushes everything below it down and breaks the grid. max-lines caps the height in terms of lines rather than a fixed pixel height, so the box stays consistent even when the font size or line height changes.

max-lines is the long-hand building block. Two related properties round out the same feature:

block-overflow — controls how the clipped edge is rendered (for example, clamp adds an ellipsis at the cut point).
line-clamp — a shorthand that sets max-lines and block-overflow together in one declaration.

Warning

max-lines is part of the still-evolving CSS Overflow Module Level 4 and is not implemented by any major browser at the time of writing. For production work today, use the widely supported -webkit-line-clamp property instead (shown in the example below). Always check current support before shipping — see MDN's line-clamp reference.

How the clamp works today (`-webkit-line-clamp`)

Because max-lines is not yet usable, the practical equivalent is a small, well-known combination of properties:

.teaser {
  display: -webkit-box;        /* required for the clamp to apply   */
  -webkit-box-orient: vertical;/* stack the lines vertically        */
  -webkit-line-clamp: 3;       /* keep only the first 3 lines       */
  overflow: hidden;            /* hide everything past the clamp     */
}

This produces the same visual result max-lines: 3 is designed to: at most three lines, with an ellipsis (…) where the text is cut. The example further down uses both the experimental max-lines syntax and the -webkit-line-clamp fallback together so it degrades gracefully.

Initial Value	none
Applies to	Fragment boxes.
Inherited	No.
Animatable	No.
Version	CSS Overflow Module Level 4
DOM Syntax	object.style.maxLines = "2";

Syntax

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

Example of the max-lines property

The paragraph below is capped at three lines. The max-lines and block-overflow declarations target browsers that eventually implement the spec; the -webkit-box, -webkit-box-orient, and -webkit-line-clamp declarations make the same effect work in browsers shipping today.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        width: 300px;
        font-size: 16px;
        line-height: 24px;
        font-family: Helvetica, sans-serif;
        overflow: hidden;
        /* Experimental, spec-based syntax */
        max-lines: 3;
        block-overflow: clamp;
        /* Widely supported fallback */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 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 clipped. Negative values are invalid.
initial	Sets the property to its default value.
inherit	Inherits the property from its parent element.

Common gotchas

It is not yet a real option. No major browser ships max-lines, so relying on it alone leaves your content un-clamped. Always include the -webkit-line-clamp fallback.
The clamp needs overflow: hidden. Whether you use max-lines or the -webkit-box approach, the excess lines are only hidden when overflow is clipped — without it the text still spills out.
-webkit-line-clamp requires the box display. It only takes effect on an element with display: -webkit-box and -webkit-box-orient: vertical. Forgetting either one is the most common reason the clamp "does nothing."
It counts lines, not characters. A wider box or smaller font fits more text per line, so the same max-lines value shows more words. Use it to constrain height in lines, not exact text length.

block-overflow — chooses how the clipped edge is rendered.
line-clamp — shorthand for max-lines plus block-overflow.
text-overflow — adds an ellipsis to a single overflowing line.
overflow — controls what happens to any content that exceeds its box.

Practice

What is the function of the 'max-lines' property in CSS?

It sets the maximum number of words in a text.It sets the maximum number of lines in a block.It sets the maximum height of an element.It is used to truncate text to a specific number of lines.It makes a text bold.