Text-overflow: ellipsis considered harmful

This post is basically a short addendum to my article about text resize and reflow. I stumbled over some instances of text-overflow: ellipsis the other day and it broke resize and/or reflow.

The whole reason text-overflow exists is to specify the behavior of text once it flows over the container. There could be with and height constraints for a block. Using overflow: hidden makes sure that there is no overlapping text, but it cuts off the text abruptly. Text-overflow: ellipsis1 allows to at least have an indicator that text is missing. But there is no way to make the hidden text visible.

In addition, text-overflow: ellipsis only works on one line text. That means that, to use this technique, you have to constraint the text to one line by using white-space: nowrap. MDN has a good example of the behavior.

There are a few legitimate use cases for this technique. For example, you might have a table with titles and descriptions. To preserve more space for the title, you constrain the description to one line on small viewports to the one-line and you repeat the description on the detail page for this item.

However, I often see it used on items like buttons or even form labels to make them look nicer(?) or when aligning them vertically. But once you change the viewport or resize the text, the end of the text disappears.

This is not the right thing to do. Even if your button might need to accommodate words like “Wagenstandsanzeiger”, seeing “Wagenstan…” is not going to be clear to users. It would be much better to hyphenate the word (using hyphens: auto2 or ­ entities) instead.

And for the visual design: Inline flex and grids give you a lot of control to align text and icons, for example. Don’t constrain the content to fit your design, make your CSS flexible to handle longer words gracefully.