How to truncate text with Text Ellipsis in CSS?

Whether for user experience or for user interface, planning the management of overflowing texts is essential for a developer: a too-long first name, for example, could completely ruin the efforts put into the design of a website.

This is the problem of variable-length texts. Not knowing their size in advance, they can break the design, and thus, inevitably affect the user experience (which is something we definitely do not want!) 🥲.

Fortunately, a CSS property exists: text-overflow: ellipsis.

It allows you to easily truncate overflowing text to avoid disrupting the interface. But you still need to know how to use it correctly.

What is an Ellipsis in CSS?

A CSS ellipsis is, to sum it up, three dots (...) that are added at the end of a text to indicate that it has been truncated.

It's a very commonly used method to maintain a clean design even with texts of variable length.

The text-overflow: ellipsis property is mainly used for short texts, on a single line.

Don't worry, there is also a solution for truncating multi-line texts! We will discover it together in the continuation of the article. 😉

Why Truncate an Overly Long Text?

To quickly summarize what we've already seen together, limiting the display of texts is often necessary for several reasons:

1. To maintain a layout: It's important to have the best possible user experience; otherwise, your user will not return to your website. A text that overflows and breaks the site's design—seen better! 😋
2. To adapt to different screens: In the context of responsive design, it's necessary to anticipate that spaces can reduce. In this case, using an ellipsis is a necessity.

How to Use text-overflow: ellipsis?

To add an ellipsis in CSS, it's mainly enough to use the CSS property text-overflow.

However, certain conditions must be met for it to work (you cannot just blindly add an ellipsis by using this property). 😬

Prerequisites to Use text-overflow: ellipsis

To use text-overflow: ellipsis, it is necessary to ensure that:

• Your block has a fixed width: This is the first source of error. An ellipsis can only be added to a block that has a specific size (for example, by using width, max-width, or flex).
• The text that overflows the block is hidden by default: For the ellipsis to work, you need to specify that any element exceeding the block must be hidden. You can do this using the overflow: hidden property.
• You prevent default line breaks: Simply use the CSS property white-space: nowrap to ensure this (otherwise, the text will just go onto a new line, not triggering our ellipsis).

Now that we've seen the necessary conditions to make an ellipsis appear, let's see a small example!

Example of Using text-overflow: ellipsis

Here's an example that allows truncating a text on a single line using CSS:

.truncate-text {
    white-space: nowrap; /* Prevent line breaks */
    overflow: hidden; /* Hide elements that may overflow */
    text-overflow: ellipsis; /* Request an ellipsis */
    width: 200px; /* Set a fixed width */
}

And our HTML:

<div class="truncate-text">
    This is an example of a much too long text to fit in this tiny space.
</div>

Test it yourself:

In this example, our text is truncated as soon as it exceeds 200px in width: the three dots will be added afterwards once this limit is surpassed.

Make sure that your element has a fixed width, otherwise, your content will adapt dynamically without restriction: your ellipsis will not be displayed.

How to Truncate Multi-Line Text?

To truncate multi-line text using CSS, it is not possible to use the text-overflow: ellipsis property directly.

We will need to use a solution, a property called line-clamp.

This property allows you to define a number of lines not to exceed, after which the text will be truncated and ellipsis added.

Example with the line-clamp Property

Here is a small example implementing an ellipsis for multi-line text using the CSS line-clamp property:

.truncate-multiline {
    display: -webkit-box; /* Specify that we want to use webkit-box */
    -webkit-box-orient: vertical; /* Indicate the text direction */
    -webkit-line-clamp: 3; /* Set the desired number of lines */
    overflow: hidden; /* Hide any overflow */
}

And our HTML code:

<div class="truncate-multiline">
    This is an example of a long text that will be truncated after three lines.
    It handles situations where the text cannot fit on a single line. For example, in descriptions for blog posts.
</div>

Test this example here:

In this example, the text will be truncated after three lines (as indicated by -webkit-line-clamp).

The -webkit-line-clamp property is a solution available for browsers using the WebKit engine.

This means that its support may depend on the browser being used. We will see a small compatibility table a bit later.

Browser Compatibility

Even though text-overflow: ellipsis and line-clamp are widely supported, it is important to check browser compatibility.

For text-overflow: ellipsis

As you can see, the CSS text-overflow property is compatible with all browsers. You can therefore use it without any problems in all your projects.

For line-clamp

It is also possible to use the line-clamp property on all browsers except on Opera Mini and on Internet Explorer.

Conclusion

Truncating a text (whether on a single line or on multiple lines) has become quite quick and easy thanks to the latest advancements in the CSS language.

We saw that it's not enough to simply apply the text-overflow: ellipsis property without considering prerequisites, like ensuring that the element has a fixed size.

Finally, for elements that have multiple lines to display (such as a short description of a blog post, for example), we saw that it's also possible to add an ellipsis using properties supported by the WebKit engine with line-clamp.

If you want to go even further, check out our complete training on HTML and CSS. 😉