Blog

percipio.london: When, why and how to use text-overflow:ellipsis

What is text-overflow:ellipsis? A brief overview of how to use it and why you may want to.

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.

List Of Files using Tailwind CSS with no Ellipsis included
<div class="h-auto w-40 p-4 rounded-md bg-slate-600 whitespace-nowrap text-gray-200">
      <h1 class="text-2xl text-blue-400 mb-4">List Of Files</h1>
      <ul>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia quasi vero enim 
         commodi dolore. Amet, magnam praesentium!</li>
        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li> 
        <li>Lorem ipsum</li>
        <li>Lorem ipsum dolor sit amet consectetur</li>
      </ul>
  </div>

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. 

Screenshot 2022 09 02 at 14 52 29

And then…

To implement an ellipsis, the classes we need to add to our list items are:

  1. text-overflow: ellipsis
  2. text-overflow: hidden

In tailwind, we use overflow-hidden and text-ellipsis as shown in the code below.

List Of Files using Tailwind CSS with Ellipsis included
<div class="h-auto w-40 p-4 rounded-md bg-slate-600 whitespace-nowrap text-gray-200">
    <h1 class="text-2xl text-blue-400 mb-4">List Of Files</h1>
    <ul>
      <li class="text-ellipsis overflow-hidden">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia quasi vero enim commodi dolore. Amet, magnam praesentium!</li>
      <li class="text-ellipsis overflow-hidden">Lorem ipsum dolor sit amet consectetur adipisicing elit. </li>
      <li class="text-ellipsis overflow-hidden">Lorem ipsum</li>
      <li class="text-ellipsis overflow-hidden">Lorem ipsum dolor sit amet consectetur</ul>
    </ul>
</div>

Which will then display on the UI as below.

Screenshot 2022 09 02 at 15 36 45

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…