Working with CSS ellipsis

What is CSS ellipsis ?

Css ellipsis behaves the same way as when you are enumerating things and ending prematurely your enumeration using the "etc..." particle. In other words, CSS ellipsis is a tool that you can use to truncate a given piece of text.

Where do you need it ?

You will probably need to use ellipsis when you will be building a UI that requires everything to keep the same size, whatever the amount of content it has to hold. To learn more about how we can use it, we will take a simple example : a row of 3 blog post cards with different content sizes.

The problem

We will use ellipsis in two different manners to achieve single line ellipsis on the title and multiline ellipsis on the abstract.

Single line ellipsis

Making a single line ellipsis is quite straight forward and easy. You have to setup a few CSS properties to achieve the desired effect. Let's directly dive in.

Each post title is represented by the following html code :

<h3 class="title is-5">
  This is a very very long blog post title that spans on two rows
</h3>

to setup our ellipsis, we will need to set several properties:

• max-width
• overflow
• white-space
• text-overflow

While you might probably know the first two ones, there a chance that you've never seen the other ones, that, i admit it, can be quite obscure for a beginner. Well it's not a big deal, white-space determines the way the white space is handled in the element whereas text-overflow determines the effect used to truncate the text. In our case, we are using text-overflow: ellipsis; . Let's set these properties to create our ellipsis effect:

h3 {
  margin: 10px 0;
  //Ellipsis
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Specifying a max width sets a boundary for the text and the white space property prevents it to wrap in a second row. overflow: hidden; and text-overflow: ellipsis; finish the job by hiding the rest of the text and displaying the suspension dots. Quite simple.

Multiline ellipsis

Unfortunately, there is nothing built in at the moment to support multiline ellipsis. Therefore, we will have to rely on some kind of hack (some might not see it like that, but i knda do). I've seen numerous attempts to do it and each one has its strengths and its weaknesses. The one that we are going to see right now is strongly reliable, but requires to define text dimensions to work properly.

We are going to apply that on the p element wich holds the post abstract.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam, ut sint illa
  vendibiliora, haec uberiora certe sunt. Duo Reges: constructio interrete.
</p>

First, we are going to need 3 variables :

• Line height
• Font size
• Lines to show

Hopefully, SCSS supports variables and we are going to take advantage of them. To achieve our goal, we are going to compute the text height dynamically by doing the following math:

Font size x Line height x Lines to show = Text height

Then, since it's multiline ellipsis, we won't be able to display the three ending dots, unless we use the -webkit-line-clamp prefixed property, wich makes cross browser support a bit shaky.

Let's first define some variables :

$font-size: 16px;
$line-height: 1.4;
$lines-to-show: 3;

Let's then style our p element :

p {
  display: block;
  display: -webkit-box;
  color: #999;
  //Ellipsis
  font-size: $font-size;
  line-height: $line-height;
  height: $font-size * $line-height * $lines-to-show;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

Like we explained earlier, we use SCSS to compute the height by multiplying our variables. We adjust the display by using -webkit-line-clamp and we add the same properties that we already used in the previous example: overflow, max-width and text-overflow.

Epilogue

In this post, we saw how CSS ellipsis can help us create clean and symetric layouts without altering the content that has to be shown. If you want to share your thoughts or ask a question, give it a shot in the comments section. I hope you enjoyed this little session as much as i did writing it and to see you again soon on Css Ninja.