The Current State of Truncating Text with an Ellipsis

Hi, my name is Mike McLin, and in this video I am going to talk about truncating text. First I’ll demonstrate how to truncate text using the CSS text-overflow property. From there we’ll take a look at cross browser support. Finally, we will view some experimental features of the property and how to accomplish a multi-line truncate.

To demonstrate the basics of how to truncate text with CSS, I’ll use this quick demo. For the HTML markup, we have a simple paragraph of Lorem Ipsum text. I’ve also added both width and border declarations to the paragraph element.

Setting up text-overflow: ellipsis

Eventually, we will want to use the text-overflow CSS property to add three dots after our text, which is also known as an ellipsis, but before we can do that, we must make the text overflow. We can prevent the paragraph from wrapping into multiple lines by assigning the white-space property a value of “nowrap”. This will cause the text to appear on a single line, and overflow outside of the paragraphs box.

Now, to prevent the text from overflowing outside of the box, we will add an overflow value of “hidden”. The only thing left is to add the final declaration, which is assigning the text-overflow property a value of “ellipsis”.

Now, we have the truncating effect we desire. There is a bit of a gotcha here, however. The text overflow property will only work on block-level elements. So, If I change the paragraph tags to emphasis tags, we will see the effect go away. We can simply restore the effect by manually changing the display property of the element to a block.

Text-overflow Browser Support

It is that simple to create this effect using on CSS. I we view the property on the “caniuse” website, we see that browser support is very strong. Older versions of Opera and Opera Mobile, plus all versions of Opera Mini will require a vendor-specific declaration to render the effect appropriately. That is as simple as rewriting the text-overflow property and prepending a “-o-” in front of it.

When looking at Mozilla Developer Network page for the text-overflow property, you will see that there are some other implementations, most notably a 2-value syntax that allows you to place an ellipsis before and after the body of text. These extra features appear to only currently work in Firefox, and therefore are pretty much useless to most developers at this time. It should be noted that the text-overflow property has been reduced down to working draft level, so the property could see some changes in the future.

Text-overflow Multiline Truncate

Usually the first question that somebody asks when seeing text being truncated with an ellipsis by the text-overflow property is if it will allow you to truncate values that overflow height-wise from a box. In other words, can we have a multiline truncate? The answer is no. Text-overflow only calculates text that overflows on the horizontal sides of the box. However, there are some workarounds.

Setting Up -webkit-line-clamp Multiline Truncate

As pointed out by David Desandro, there is a property for webkit browsers called “-webkit-line-clamp” that will allow you to do multiline truncates when used in conjunction with a few other experimental webkit-only properties.

First, we need to set the display property to a value of “-webkit-box”. Next, we will set the -webkit-box-orient property to a value of “vertical”. Finally, we use the -webkit-line-clamp property to set the number of lines we want to display.

This would seem to be a perfect answer to our multiline truncating woes, but obviously it will only work in webkit browsers, plus these properties are considered experimental, and unsupported.

Truncate text with an Ellipsis using jQuery

To be honest, the best way to achieve multi-line truncation is to use JavaScript. There are many different plugins and scripts that can give you this feature. I found a jQuery plugin called “dotdotdot” that appears to solve the problem, plus enhance the functionality by adding additional features like adding hyperlinks after the truncated text ellipsis.

Final thoughts about text-overflow ellipsis

So, that’s it. As you can see truncating text isn’t quite an exact science. However, the majority of the browsers today are up to the task of truncating single-line text using only CSS or performing more complex truncations by falling back to JavaScript.