Applying an ellipsis to multiline text

CSS3 gave us the wonderful property, text-overflow, which can do things like create ellipsis and gracefully cut off words. However, text-overflow has a serious limitation: it only works on a single line of text.


What is the solution?

In order to fully understand why this pure CSS solution is so awesome, I want to run through a few of the alternatives and the problems with each.

  1. -Webkit-line-clamp property

To use -webkit-line-clamp, add the following to your CSS:


A Simple, Pure CSS Solution

Clearly none of these options are perfect. I wanted an easier and more bulletproof way to handle this, so I found that we can truncate text using two carefully placed CSS pseudo elements.

Here’s the full CSS. We’ll walk through the code below.


How It Works

Let’s imagine that we need to contain a block of text to a max of 3 lines. In order to do so, we have to handle the following cases:

1. The text is more than 3 lines



 2. The text is less than 3 lines


3. The text is exactly 3 lines


===============================THANK YOU==================================

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

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