max-lines

The max-lines property limits the content of a block to a maximum number of lines before being cut off and can create a line clamping effect when combined with block-overflow. In fact, both properties make up the line-clamp property, which is a shorthand for combining them.

It’s worth noting at this point that the spec that introduces max-lines is currently in Editor’s Draft, so everything we’re talking about here is subject to change since it is a work in progress. The spec even notes that this property is at risk of being dropped during candidate recommendation. That said, the spec is also quick to note that does not mean the idea may simply be deferred and could pop up in another draft period.

Syntax

.module {
  max-lines: [none | <integer>];
}

max-lines accepts the following values:

• none: No maximum number of lines is set and all content will render.
• <integer>: The number of lines before content is discarded. Only positive integers are accepted. Negative values will be discarded and cause the property to be ignored.

The spec notes that the property’s integer value can be animated. While we do not have a demo because of a lack of browser support, that could be an interesting way to create an effect of hiding or revealing more content with user interactions.

The Limiting Visible Lines Property

The spec describes the max-lines as “limiting visible lines” and that’s because the content that falls within the maximum number of lines is left in view while the rest is “neither rendered nor measured.” In other words, the content that falls outside the maximum number lines is never rendered by the browser at all, similar to the content being set to display: none;.

The spec goes on to describe the content that gets chopped by max-lines as fragments: one fragment that is rendered in view and another fragment that is not rendered and out of view. What follows from there could feel like the plot of the Matrix because the box that contains the content becomes a “fragmentation container” which captures and stores that fragmented piece (now known as a <"region break“) and is able to pass it off to another box if it is part of a CSS Region.

Think of it like an old school newspaper where the articles on the page are split into columns. If we set max-lines on a column and that column has another column next to it that is part of the same article, then the content that is leftover from the first column can flow right into the next one.

Browser Support

None at the moment, but you can get some support using the WebKit’s proprietary implementation of line-clamp:

Related Properties

• block-overflow
• line-clamp

Additional Resources

• CSS Overflow Module Level 3 – The editor’s draft where block overflow is introduced
• Safari CSS Reference – Documentation for the unsupported WebKit implementation
• Line Clampin’ (Truncating Multiple Line Text) – by Chris Coyier
• Clamp.js – a JavaScript method for cross-browser support
• Pitfalls of Card UIs – Dave Rupert considers the dangers of truncating text