How to Implement CSS Text Overflow with Ellipsis in a Table Cell?

CSS text-overflow in a Table Cell

The goal is to implement CSS text overflow in a table cell, ensuring that text exceeding the cell's width is clipped with an ellipsis, preventing it from wrapping to multiple lines.

Attempt:

An initial attempt was made using the following CSS:

td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

However, the white-space: nowrap property caused the text and its cell to expand indefinitely to the right, exceeding the table container.

Solution:

To achieve the desired effect, one must set the max-width CSS property for each table cell. Here's an example:

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

Setting the max-width ensures that the overflow is contained within the specified width.

Responsive Layouts:

For responsive layouts, consider using max-width to specify the minimum width of the column or setting it to max-width: 0; for full flexibility. The containing table should have a specific width, such as width: 100%;.

table {width: 100%;}
td
{
 max-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
td.column_a {width: 30%;}
td.column_b {width: 70%;}

IE Considerations:

For IE 9 or earlier, the following HTML hack is necessary to resolve a rendering issue:

<!--[if IE]>
<style>
table {table-layout: fixed; width: 100px;}
</style>
<![endif]-->

The above is the detailed content of How to Implement CSS Text Overflow with Ellipsis in a Table Cell?. For more information, please follow other related articles on the PHP Chinese website!