Quick Tip Tuesday: Hiding Text With CSS Ellipsis

Hi guys. Every Tuesday, I’ll be sharing a quick tip that I’ve found useful in the hopes that it can be useful for you too. Today’s tip is about truncating/hiding text with ellipsis.

It can be quite helpful sometimes to have long lines of text trail into an ellipsis (i.e three dots like so, ‘…’) instead of wrapping or just being hidden. Sometimes the space you’ve allocated to the containing element is not wide enough to accommodate the text.

Hiding the text is one option. For instance, you could say:

.some-container {
overflow: hidden;
}

But in many cases, it is actually more helpful to give your user a visual cue as to the fact that there is some hidden text content. That’s where the ellipsis tool comes in.

Take a look at this table of foods sorted by food class. Each row comes with a meal idea you could prepare using the foods. (Yes, Foodie alert :-) )

See how the last column’s text content wraps and forms two lines. The first solution could be to rearrange the width of the tables. But let’s assume we don’t want that and absolutely have to have equally wide table cells. We could solve it by using the code above targeted to the table data elements.

table th {
// Max-width is needed to make this work on table elements
// For normal text containers like <h> and <p> tags you don't need // it
max-width: 100px;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
table td {
// Max-width is needed to make this work on table elements
// For normal text containers like <h> and <p> tags you don't need // it
max-width: 100px;
overflow: hidden;
white-space: nowrap;
border-left: 1px solid black;
border-bottom: 1px solid black;
}

The result would be:

Notice how it’s now all on one line with no wrap while the rest of the text trails off.

Now, we could stop here, but how does the user know that there’s more text. Beyond just the abrupt cutting off of the words there are no cues as to the existence of more text. It is also not visually appealing. See how the text runs right to the edge of the cell with no respect for the default padding of the table data cell.

This is where the ellipsis attribute comes in.

table th {
max-width: 100px;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
table td {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis; //We add a text-overflow property and set
// it to 'ellipsis'
white-space: nowrap;
border-left: 1px solid black;
border-bottom: 1px solid black;
}

Now we have:

The padding is restored and the 3 dots provide a visual cue that there’s some text not being shown. We could add other cues which could lead the viewer to click or hover for instance, but that’s beyond the scope of this post.

And that’s it for this Tuesday. Use the ‘text-overflow: ellipses’ property whenever you want to provide a visual cue to your user that there’s text hidden from view. On a final note, table cells need to have their max-width specified in order for this to work. Which is why I’ve used a table in this example. Other elements such as spans, divs and headers don’t require this workaround.

Please recommend if you’ve found this useful or entertaining and drop a comment below with your own tips. Until next Tuesday — Keep coding!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.