Text Truncation with Ellipsis on Multiple Lines

Text truncation is a commonly used technique to manage the display of long text content in limited spaces. Adding an ellipsis (…) at the end of the text clearly indicates to the user that the content is truncated.

Classic Method: Single-line Truncation

The most well-known method for truncating text with an ellipsis is done on a single line. Here’s the corresponding HTML and CSS code:

<div class="single-line-truncate">
  I'm going to make him an offer he can't refuse. I'm going to make him an offer
  he can't refuse.
</div>

.single-line-truncate {
  width: 300px; /* Fixed width for the example */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

See the Pen Truncate text by 56kode (@56kode) on CodePen.

This technique works perfectly for text that needs to fit on a single line. However, it shows its limitations when we want to keep multiple lines of text before applying the ellipsis.

Truncation on Multiple Lines

To truncate text over multiple lines (for example, 3 lines) while adding an ellipsis, we need to use a different approach. Here’s the recommended technique:

<div class="multi-line-truncate">
  May the Force be with you. I'm going to make him an offer he can't refuse.
  Here's looking at you, kid. Frankly, my dear, I don't give a damn. You talking
  to me? E.T. phone home. I'll be back. You can't handle the truth! I see dead
  people. I'm the king of the world!
</div>

.multi-line-truncate {
  width: 300px; /* Fixed width for the example */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

See the Pen Truncate text (multilines) by 56kode (@56kode) on CodePen.

In this example, -webkit-line-clamp: 3; indicates that we want to display 3 lines before truncation.

It’s important to note that this method uses WebKit-specific properties, which may cause compatibility issues with some browsers, although compatibility is generally good.

Fallback Solution for Unsupported Browsers

For browsers that don’t support WebKit properties, we can simulate the truncation effect (without the ellipsis) using max-height. Here’s how to do it:

<div class="fallback-truncate">
  I'll have what she's having. You can't handle the truth! I'm walking here! I'm
  walking here! I'll be back. Here's Johnny! Say hello to my little friend! I'm
  the king of the world! You talkin' to me? I love the smell of napalm in the
  morning.
</div>

.fallback-truncate {
  width: 300px; /* Fixed width for the example */
  max-height: 4.5em; /* 3 lines * 1.5em (line height) */
  line-height: 1.5em;
  overflow: hidden;
}

This approach sets a maximum height based on the desired number of lines multiplied by the line height. Although the ellipsis won’t be visible, the text will still be truncated.

By combining these techniques, you can create a robust solution for truncating text over multiple lines, suitable for different browsers and display situations.