Displaying text in a tool tip when text overflows its container
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.