block-overflow

The block-overflow property truncates text and indicates more content follows by inserting an ellipsis or custom string after a number of lines that is set by the max-lines property.

The property has been introduced in the Editor’s Draft of the CSS Overflow Module Level 3 specification. That means it’s experimental at the moment and considered a work in progress. In fact, you can follow the conversation which includes chatter about renaming the property altogether.

Syntax

.module {
  block-overflow: [clip | ellipsis | ];
  max-lines: []; /* required by block-overflow */
}

block-overflow accepts the following values:

• clip: Does not insert a character to indicate more text to follow. Instead, the content is merely truncated and cut off at the last character.
• ellipsis: Displays an ellipsis (…) at the end of the last line. It should render as a Unicode character (U+2026) but could be replaced by an equivalent based on the content language and writing mode of the User-Agent being used.
• <string>: Displays custom text (e.g. “Read more →”) at the end of the last line. The spec says that the User-Agent may replace the string with an ellipsis if the string is “absurdly” long.

Again, all of this is experimental, in-progress work. These values could change. Or, more could be added. For example, there have been calls for a “smarter” ellipsis that might be capable of doing more things, like cropping text in the middle:

One thing led to another and 
... 
yada yada yada, that was that.

Use line-clamp for short

We can get just about the same thing using line-clamp which is shorthand for the block-overflow and max-lines properties.

As it’s currently defined, though, line-clamp only accepts a single numeric value for max-lines and implicitly sets block-overflow to the ellipsis value. So, if you want to use a custom string for truncation, then you gotta go with the long form instead.

Browser Support

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

More information

• 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