How to Achieve CSS Text Overflow with Ellipsis in Table Cells?

CSS Text Overflow in Table Cells

Achieving text overflow within table cells can be challenging. While using text-overflow: ellipsis alone may not suffice, we can employ additional CSS properties to achieve the desired effect.

Solution

To clip text with an ellipsis and prevent wrapping, we set the max-width property for each table cell (td element). This specifies the maximum width available for the text before it is clipped. Additionally, overflow: hidden ensures that excess text is hidden.

CSS Code

td {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Responsive Layouts

For responsive layouts, the max-width property can be used to define the effective minimum width of the column. Alternatively, setting max-width: 0; allows for unlimited flexibility. The containing table should have a specific width, typically set as width: 100%;.

Historical Note

For Internet Explorer 9 and earlier versions, an additional