We all would have come across scenarios where we wanted to show a certain part or section of a paragraph and then truncate the rest with an ellipsis ( … ) suffixed at the end. An ellipsis in CSS is generally used to show that there is more content, but it has been omitted. The most common use for an ellipsis is in dialogue or text to show where someone has trailed off or paused. While there were multiple ways we used to do it in the past, the modern browsers have in-built support to show ellipsis in CSS using the text-overflow: ellipsis property. Let’s take a look at how to do it.
How to show ellipsis in CSS using text-overflow: ellipsis?
In CSS, the ellipsis can be represented by the text-overflow: ellipsis property. This property specifies what happens when content overflows its container and how it should be shown. The following example shows how it can be achieved:
Example of text-overflow: ellipsis
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}Please note that the ellipsis property requires the width of the element also to be specified in pixels. However, if you do not want to use the width in pixels, there is a workaround. You can instead specify the width in percentage (%) using the calc() method like :
Example of text-overflow: ellipsis with dynamic width
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: calc(70%); /* Specify width in % etc using calc method */
}For most cases, this should suffice. However, there are cases where you might want to show the ellipsis after 2 lines or after multiple lines. Lets us take a look at how to do that.
How do you put an ellipsis after two or more lines in CSS?
While the previous example is good and would suffice for many of the scenarios, there is a catch with it that it would not put an ellipsis after say 2 or 3 or multiple lines. However, the CSS property -webkit-line-clamp can come in handy to do it. To put an ellipsis after 2 lines we need to do the following:
Example of Multiline ellipsis in CSS
.ellipsis--2 {
display: -webkit-box;
-webkit-line-clamp: 2; /*No of lines after which the ellipsis needs to be added*/
-webkit-box-orient: vertical;
overflow: hidden;
}In order to put the ellipsis after 2 lines, we need to make use of the -webkit-line-clamp CSS property. So if you want to show the ellipsis after 3 lines, you just need to update the -webkit-line-clamp value to 3. However, please note that even though this would work on most of the modern browsers, it might not work on some of the older browsers. Take a look at the browser support of -webkit-line-clamp property.
Is the text-overflow: ellipsis; not working? Check out these fixes!
There can be multiple reasons why a text-overflow: ellipsis property might not be working. However, some of the most common reasons could be :
- Does the browser support the text-overflow: ellipsis; property? You can check it out at https://caniuse.com/text-overflow
- Is the width of the element in pixels? The text-overflow: ellipsis property works when the width of the element is in pixels. However, if you can’t use pixels directly, use a % value within the calc() method.
- Check if the element has overflow:hidden and white-space:nowrap set as these both are important to have.
These are the most common 3 reasons why the text-overflow: ellipsis property might not be working. However, check all the CSS properties individually to ensure that you have not missed out any.
As you can see, with the modern browsers supporting the text-overflow: ellipsis property, adding an ellipsis in CSS has become an easy task. Gone are the days when we had to rely on JavaScript or other workarounds for such features. I hope you enjoyed reading the article and found a solution to your requirement. You can read more such CSS tutorials under our CSS category.