CSS Truncate Text With Ellipsis

— 7 minute read

Note: I've written a updated, more modern article: Read the full article here

At one stage, truncating text with CSS was hype instead of just showing the whole text, which could be one or multiple lines. We ended up doing the ellipsis (...) for only one line.

This means it would show a text and truncate itself with the three dots.

HTML Structure

<h1>“In my experience there is no such thing as luck.” – Obi-Wan Kenobi</h1>

Nothing fancy, just a heading which we will make smaller and truncate.

CSS to truncate text with an ellipsis

To truncate the text, we use the following CSS

.truncate {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

That is the minimum requirement.

  • width; needs to be defined since this will only work for a one-line
  • white-space: nowrap; Wraps the line no matter where it ends
  • overflow: hidden; Because we don't want to show the other text
  • text-overflow: ellipsis; This is what adds the three dots.

View this example to shorten text on Codepen

See the Pen CSS Truncate Text With ... by Chris Bongers (@rebelchris) on CodePen.

Truncate Multiple Lines at the end in pure CSS

This works well, but what if we want to truncate multiple lines?

Note: There are many options here, and I'm only going to walk through the CSS options. (NOT the JavaScript ones)

For the HTML part we are using the following code:

<div class="content">
  <p>
    Morbi rutrum lectus turpis, sit amet sollicitudin eros condimentum vitae. Integer
    consequat eros vel tortor tempor, et vulputate turpis pretium. Suspendisse vel metus
    sem. Aenean sollicitudin luctus est ac gravida. Curabitur eros tellus, scelerisque sit
    amet suscipit consequat, laoreet at quam. Nullam massa ante, tincidunt quis metus ut,
    consequat facilisis risus. Orci varius natoque penatibus et magnis dis parturient
    montes, nascetur ridiculus mus.
  </p>
</div>

Webkit Flexbox Truncate CSS

We can do one solution, and it is by far the easiest, which is using the old webkit/flexbox way.

Update: This is the most modern and adviced way of doing it. Read the full article here

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

Pure CSS Truncate

Another way that would be better supported but more difficult to set up is to use calculated heights to shorten a text.

html {
  --lh: 1.4rem;
  line-height: var(--lh);
}
.content.truncate-overflow {
  --max-lines: 3;
  position: relative;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
  padding-right: 1rem;
}
.content.truncate-overflow::before {
  position: absolute;
  content: '...';
  bottom: 0;
  right: 1rem;
  z-index: 1;
}
.content.truncate-overflow::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  background: #fff;
  z-index: 0;
}

Let's keep in mind what's happening here:

html {
  --lh: 1.4rem;
  line-height: var(--lh);
}

We define the basic line-height and assign it to the property (we need it later on).

.content.truncate-overflow {
  --max-lines: 3;
  position: relative;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
  padding-right: 1rem;
}

Here we make a new variable to define the number of lines we want to show. We then set the max-height of this element as the number of lines times the line-height. And we set the overflow: hidden. Next, we add a padding-right, where we will place the actual ellipsis effect.

.content.truncate-overflow::before {
  position: absolute;
  content: '...';
  bottom: 0;
  right: 1rem;
  z-index: 1;
}

The before Pseudo-element shows the actual dots to trim the word and is placed on the right side.

.content.truncate-overflow::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  background: #fff;
  z-index: 0;
}

Then we add an after to place under the three dots, so they lay over any content that might be there still.

You can find code examples to these CSS methods on the following Codepen.

See the Pen CSS Truncate Text With ... (Multi-line) by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter