Multiple Line Ellipses Using CSS

What’s an Ellipsis?

Ellipses are basically ‘…’ at the end of the text which lets the user know that there is more text or content in that element. Ellipses can be used to show content within the single line or even multiple lines.

In this blog, we will show you how to write ellipses for more than one line or multiple lines.

For single line the CSS may be defined as follows:

Single line ellipses

If you want to apply ellipses(…) to the single line of text, CSS makes that easy with the use of text-overflow: ellipses property. With text overflow, ellpises can b applied to the single line of text. Following is the CSS defined for single line of text:-

.ellipses{

text-overflow : ellipses;

white-space : nowrap;

overflow : hidden;

}

Multiple line ellipses

However, if we want to use ellipses on multi-line text, as there is some requirement, CSS has no standard method for doing this but there are some CSS hacks available to achieve this.

As we notice in the above code, text won’t break up into multiple lines because of the property white-space: nowrap, instead it will be forced to stay on the same line .

In order to apply ellipses for multiple lines we have to use the following CSS:-

.ellipses-content{

display : block ;

display : -webkit-box ;

max-width : 100% ;

margin : 0 auto ;

font-size :14px ;

height : 43px ;

line-height : 1 ;

-webkit-line-clamp : 3 ;

-webkit-box-orient : vertical ;

overflow : hidden ;

text-overflow : ellipses ;

}

We have to do some calculations in order to make this code work properly . As the font size in the above example is set to 14px , the height property must be set equal to the font-size multiplied by the number of lines required plus 1px to account for character descenders.

So if the font size is 14px and we want to show 3 lines of text before the ellipses must be added. So in this case , 3 X 14 + 1 = 43 , which means that the total height should be 43px .

Moreover, for this to work, they must be put inside a div of fixed width. If the element has no width then the text will continue and the effect will not work.