Using text-overflow: ellipsis

When we deal with long text, we often want to truncate it so that it fits our UI design. Typically, we need whatever is too long to be displayed nicely to be replaced by an ellipsis, which is a set of dots (…) indicating that there is the text being left out. Text-overflow is a CSS property that allows an easy way to do this when its value is simply set to ‘ellipsis.’ But more often than not, developers find that ‘text-overflow: ellipsis’ is not working as expected. This is because some very specific conditions must be met in order for everything to work perfectly, so let’s dive right in and examine them.

To produce any results, there are at least two other CSS properties you need to set properly for’ text-overflow: ellipsis.’ Firstly, the ‘white-space’ property should be set to ‘nowrap.’ This property determines the way in which long text will be wrapped in relation to whitespace characters and using ‘nowrap’ as the value will restrict the text to only one line. Truncating multiline text with an ellipsis is an entirely different story. Using only the ‘text-overflow’ property as described in this text to get the multiline ellipsis to work is impossible.

The second thing which must be set is ‘overflow.’ Unless you set it explicitly to ‘hidden,’ it will likely default to ‘visible,’ rendering the ‘text-overflow’ property useless. Overflow value does not necessarily have to be ‘hidden.’ Using any property other than ‘overflow: visible’ should produce the desired results. However, considering that using either ‘overflow: scroll’ or ‘overflow: auto’ doesn’t make much sense in this context, the best choice is to default to ‘overflow: hidden’ when using ellipsis.

Try it out in JSFiddle 

After setting these three properties for the text, you wish to truncate, if you are lucky enough, you might already have a working text ellipsis. But more often than not, this is not the case, and the ellipsis still won’t work properly. If you are in this situation, there are multiple other things that you should pay attention to in order for ‘text-overflow: ellipsis’ to work properly.

TL;DR: Make sure that the text you want to truncate has these three properties set: text-overflow: ellipsis; white-space: nowrap; overflow: hidden;

Width property

The first thing to check when having issues with ‘text-overflow: ellipsis’ is whether your element is constrained to some width. This can be the text element’s width, any parent element’s width, or even the width of the display window. Depending on your requirements, you might want to use different ways of setting width, and each comes with its little special considerations.

Explicitly setting ‘width’ or ‘max-width’ for your text element in any absolute (px, cm, pt…) or relative (em, vm, vmin, vmax…) length unit is the easiest solution and should always work. It also works if you use ‘width: auto’ or ‘width: inherit’ when the width of any parent elements is explicitly constrained.

Try it out in JSFiddle

Instead of setting ‘width,’ you can also set ‘max-width’ for the truncated text, which should all work the same.

Try it out in JSFiddle

If you would like to keep your UI responsive, you might choose to define element width in percentages. You might have read somewhere that ​​using ellipsis and percentage width don’t work together, but this depends on the ‘width’ and ‘display’ properties of your parent elements. Theoretically, it is possible to define your width in percentages since the size of the parent element will constrain width or if there is no explicit width set, the viewing window size. However, if your parent elements use a ‘flex’ display, you might need to set some additional properties. Most importantly, when you define your width in percentages, ensure that all parent elements with the ‘display: flex’ property have overflow set to ‘hidden.’ 

Try it out in JSFiddle 

Again, inheriting percentage width from elements above should work as well. And also, instead of using the ‘width’ property, you can use ‘max-width.’

Try it out in JSFiddle 

TL;DR: Width or max-width should be explicitly set or inherited. When setting the width in percentages, all parent elements with display: flex; property must have overflow:hidden;

The width can also be set using CSS’s ‘calc()’ function. However, using ‘calc()’ can sometimes produce issues of its own, so be careful when using it and make sure to check browser support for using this function.

Try it out in JSFiddle 

Display property

Display property can also affect if your text ends up truncated or not. When the display property is set to ‘block’ or ‘inline-block,’ there shouldn’t be any problems with ‘text-overflow: ellipsis.’

Try it out in JSFiddle

However, when using flex elements, you might need to fiddle around to get your text truncated. You can try setting ‘min-width’ for your element to ‘0,’ which should do the trick.

Try it out in JSFiddle

TL;DR: Ensure the display is set to ‘block’ or ‘inline-block’ for your truncated text. If using flex display, set ‘min-width’ to ‘0’.

Hopefully, these tips and tricks will help you get your text truncated as you want it.