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.

csscode_1

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:

css3

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.

csscodedescription_2

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

multiliecomment1_3

multiliecomment2_3

 2. The text is less than 3 lines

multiliecomment3_3

3. The text is exactly 3 lines

multiliecomment4_3

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

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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.