How To Add Vertical Ellipsis After Multiple Lines Of Text In CSS

In this tutorial we'll take a look at how to add vertical ellipsis to your HTML elements. We will enable vertical ellipsis to a DIV element, a flex container and a table cell.

How To Add Ellipsis With Multiline Text Truncation

In CSS "vertical ellipsis" is the same as (...) which is actually horizontal ellipsis! Not to be mistaken for ⋮ (the "vertical dots" or "column ellipsis"). It is often used to indicate a trailing thought but also continuation of text past available container space.

The CSS's vertical ellipsis, which is used to add "3 dots" at the end of a long paragraph of text, will be described in this tutorial. And here's what it looks like:

In example above, the text within parent container is much longer. But instead of cutting off at the first line, like with regular text-overflow: ellipsis, the text cuts of on second line of text.

This is achieved by using -webkit-line-clamp: 2 property. Just change 2 to however many lines you need the ellipsis to appear after, in your case.

Note, you'll need to set container to display: -webkit-box but also add -webkit-box-orient: vertical to make sure line will clamp.

What to do if vertical ellipsis is not working?

If your vertical ellipsis is not working, and you see 3 dots after the 2nd line, but the text continues to flow as usual past that point, try specifying max-height: 3.8em and try modifying the value at decimal point level. It might take few times to adjust the container to correct height, depending on your font size, and other properties that might be present.

When text content is displayed inside constrained spaces on responsive websites and applications, truncating the text becomes necessary. Moreover, in this particular usecase, we'll be looking at adding CSS ellipsis to multi line text.

While a horizontal ellipsis (...) can easily be achieved with text-overflow: ellipsis for single lines, achieving a similar effect for multiline content is a bit more tricky.

This technique is often termed as vertical ellipsis and it requires a different approach.

• Vertical ellipsis adds 3 dots at the end of text while limiting paragraph to the number of lines specified by line-clamp property.
• To enable line-clamp property to work, it must be used in combination with display: -webkit-box.
• You can still make vertical ellipsis work in a flex container, by nesting the flex parent with another div element, whose display property is set to -webkit-box.

We also have this on our own StackOverflow as a question. Check it out!

So you want to add 3 dots to the end of text, but you want the ellipsis to appear vertically, which means on multiple lines of text. For example, you can add text ellipsis to always appear on 3rd line of responsive-width paragraph. Or set it to cut off at the end of second line of text.

To add vertical ellipsis to your HTML element, follow these instructions.

Below you will find source code for multiline CSS ellipsis.

How to add miltiline vertical ellipsis to add 3 dots after 2 or 3 lines of text?

Here's the standard code for adding ellipsis on multiple lines of text:

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

Note -webkit-box is old value for flexbox. But it must be specified to make line-clamp work. Clamping won't work simply inside a modern display:flex container.

However, it's possible to make vertical ellipsis work on miltiple lines in a flex container using a second nested element with -webkit-box. See next section to understand how to do it.

How to add vertical ellipsis to a flex element?

Flex containers is usually where you want to add vertical ellipsis that can span over multiple lines of text. We saw how to implement multiple line clamping in previous section.

To make vertical ellipsis work in a flex container, use flex as a wrapper to your -webkit-box container, as shown in the following example:

.container {
    display: flex;
}

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

And the HTML:

<div class="container">
    <div class="truncate">
        This is a very long piece of text that will be truncated after three lines.
    </div>
    <div>
        Other flex item content here.
    </div>
</div>

The same goes for table, and CSS grid. To add vertical ellipsis to grid or a table cell, just wrap it in a secondary container. Just as an example, see next section that provides source code on how to add vertical ellipsis to a table.

How to add vertical ellipsis inside a table cell?

Implementing a vertical ellipsis within a table cell to truncate multiline text involves a few steps. Here's a simple example using the -webkit-line-clamp method:

table {
    width: 100%;
    border-collapse: collapse;
}

td {
    border: 1px solid black;
    width: 33%;
    vertical-align: top;
}

.truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    max-height: 60px;
    width: 100%;
}

Here's the HTML code:

<table>
    <tr>
        <td>
            Regular cell content
        </td>
        <td class="truncate">
            This is a long piece of text in a table cell that will be truncated after three lines, and the remaining text will be replaced with an ellipsis. This method works best in WebKit-based browsers.
        </td>
        <td>
            Another regular cell content
        </td>
    </tr>
</table>

With this setup, the text in the middle cell will be truncated to display only three lines, and any additional text will be hidden behind an ellipsis.

Do note that -webkit-line-clamp and its associated properties are WebKit-specific and thus will primarily work in browsers like Safari and Chrome. Always test in the desired target browsers to ensure compatibility.

It took hours to put this material together. Please help me out by sharing it 🙂

Click button below to share link on WhatsApp or Discord or with friends: