Truncate text after multiple lines with an ellipsis

Sometimes you want a layout to be completely consistent. You may need to restrict the length of text content to achieve this by truncating it (cutting it off at a certain point). The most commmon instance is where you want card components to have an uniform size.

To provide a hint to the user that the text is truncated, an ellipsis (3 dots) can be appended to the final sentence. To pull this off, some unusual CSS is required!

.truncate-mutliple-lines-ellipsis {
  --num-of-lines: 3;
  
  -webkit-line-clamp: var(--num-of-lines);
  line-clamp: var(--num-of-lines);

  overflow: hidden;
  text-overflow: ellipsis;

   display: -webkit-box;
  -webkit-box-orient: vertical;
}

Demo

Here is a simplified version of a standalone card with a description that is truncated after 3 lines.

Below is what a similar card looks like in a grid layout:

Explanation

Let’s cover the more straight-forward bits first!

We can restrict the text block to a fixed number of lines through the line-clamp property. Support of line-clamp by most browsers requires using the -webkit prefix.

We clip any text that exceeds these number of lines (overflows) through overflow: hidden. We use text-overflow: ellipsis to add an ellipsis when the text block overflows and needs to be truncated.

/* this does nothing unfortunately */
.truncate-mutliple-lines-ellipsis {
  --num-of-lines: 3;

  -webkit-line-clamp: var(--num-of-lines);
  line-clamp: var(--num-of-lines);

  overflow: hidden;
  text-overflow: ellipsis;
}

As it stands, the above rule will do nothing unfortunately!

It speaks to the era that this functionality was introduced that you need to use the old version of flexbox, which was part of a draft specification. You set this through display: -webkit-box. And you need to use it in combination with the-webkit-box-orient property to specify it as a vertical layout. With these properties added, it works!

.truncate-mutliple-lines-ellipsis {
  --num-of-lines: 3;

  -webkit-line-clamp: var(--num-of-lines);

  overflow: hidden;
  text-overflow: ellipsis;

   /* This is from the draft flexbox specification. It is deprecated. */
   display: -webkit-box;
  -webkit-box-orient: vertical;
}

Issues

Relying on non-standard CSS is best avoided. There is a possibility that one of these properties or a property value is removed in the future.

This snippet is fragile. It can break when used in conjugation with other properties. For example, maybe you want a paragraph to have some padding and be truncated after a few lines. The presence of padding will cause the entire text content to be shown!

Alternative methods

Truncate text after multiple lines with fadeout

To provide a hint to the user that the text is truncated, the text can be faded out gradually towards the end of the block through creative usage of the mask property. It is a more elegant approach than using ellipsis in my opinion.

See Truncate text after multiple lines with fadeout snippet for more info.

Truncate after multiple lines with max-height and add an ellipsis manually with a pseudo-element

You can use max-height with the lh unit to restrict the height of a block based on line height.

To manually add an ellipsis to the end of the truncated text, you can use a pseudo-element. The difficulty is that you only want to do this if the text exceeds the maximum number of lines permitted. You can place a second pseudo-element over the first pseudo-element to obscure the ellipsis when the block does not overflow. The downside is that the second pseudo-element needs to have the same background color as the containing element. You must keep these in sync!

Another downside of this approach is that visually it can look off sometimes. It is not possible to have the ellipsis aligned exactly with the end of the truncated text because the line length can vary. Sometimes there is a considerable gap between the truncated text and the ellipsis.

You would need to reach for JavaScript to eradicate this gap consistently.