Displaying text in a tool tip when text overflows its container

Tai Bo
3 min readJun 16, 2022

In several apps I work on, we use angular material to display data in a table. Sometimes, long text causes the height of the table cells to increase, resulting in an unaesthetic UI.

Using CSS, we can set the max width of the table cells, hide overflow and show ellipsis at the end of the overflowing text. When the user hovers over the long text, we can display the full content in a tooltip.

Below CSS snippet will instruct the browser to hide the overflow text and display with ellipsis.

--

--

Tai Bo

Backend developer in .NET core. I enjoy the outdoor, hanging out with good friends, reading and personal development.