percipio.london: When, why and how to use text-overflow:ellipsis
What is Ellipsis?
Ellipsis is a css value for text-overflow which decreases the amount of text displayed when there is not enough space to display the text in full within the parent container. Ellipsis truncates the length of the text so that it is contained within its parent element, adding … at the end.
Why use Ellipsis?
Have you ever found yourself in a situation where you have a long paragraph that you would like to keep to one line without it overflowing the parent container? If so, this is a perfect scenario to implement a text-overflow:ellipsis as it will ensure your text content is contained, with no overflow or wrap taking up additional space, it also unifies the text-content.
Where to use Ellipsis?
A list is a great use case for text-overflow:ellipsis. For example, you may have a list of file names, which you would like to display in Files Component with a set width. If there is not enough space for the text content on a single line in the parent container, the text content will overflow outside of the parent element.
Let’s just take a look at the above code. The parent div is the container, which has a set width, a height of auto and a whitespace-nowrap class. This is to prevent the text content wrapping onto a new line when it reaches the end end of the parent div. This has been added to keep the text content on one line so its clean and consistent.
And then…
To implement an ellipsis, the classes we need to add to our list items are:
- text-overflow: ellipsis
- text-overflow: hidden
In tailwind, we use overflow-hidden and text-ellipsis as shown in the code below.
Which will then display on the UI as below.
As you can see, Ellipsis is great tool that can help resolve text content lengths with only two additions of CSS code.
Next, we will look at a more complex example…