Truncating Multi-line Text with CSS

To truncate multiline text in CSS, Safari introduced -webkit-line-clamp a long time ago (first mentions I found date back to 2010).

.line-clamp-3 {
  /* Required declarations: */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;

  /* Limit the text block to three lines */
  -webkit-line-clamp: 3;
}

By now the property has been standardised as line-clamp. Firefox announced that it is also about to support it in Firefox 68, which due July 2019. In said version Firefox will support -webkit-line-clamp (-webkit-prefixed!), this as per CSS Overflow Module 3 Spec:

For compatibility with legacy content, UAs that support line-clamp must also support the -webkit-line-clamp property.

Neat! But … while testing – using Firefox Developer Edition 68.0b4 – I noticed that Firefox:

  1. Supports only the prefixed -webkit-line-clamp, and not line-clamp
  2. Also requires the extra display: -webkit-box; and -webkit-box-orient: vertical; declarations

This feels weird to me … I’d (1) also support the non-prefixed version and (2) would’ve dropped those extra requirements if I were Firefox. I guess this is a direct side-effect of us only having two rendering engines (e.g. WebKit and Gecko) anymore?

The CSS feature for truncating multi-line text has been implemented in Firefox →

💁‍♂️ What about older browsers that don’t support it? For those I used to limit the height of the box to a multiple of the line-height:

Multiline `text-overlow: ellipsis`

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

7 Comments

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.