How Can I Clip Text with an Ellipsis in Table Cells Using CSS?

Clipping Text with Ellipsis in Table Cells Using CSS

Question:

Can you clip text in a table cell with an ellipsis instead of allowing it to wrap to multiple lines?

Attempted Solution:

Using the CSS properties overflow: hidden, text-overflow: ellipsis, and white-space: nowrap didn't work as intended.

Answer:

To successfully clip overflowing text in a table cell, you need to add the max-width property to the td class:

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

This sets the maximum width for each table cell and applies the other properties to ensure that it clips with an ellipsis when the text exceeds the specified width.

In responsive layouts, you can use a dynamic maximum width:

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

Additionally, the containing table requires a specific width:

table {
  width: 100%;
}

The table cell widths can be set as percentages:

td.column_a {
  width: 30%;
}
td.column_b {
  width: 70%;
}

For older versions of Internet Explorer (IE 9 or less), this additional code is necessary to fix a rendering issue:

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

The above is the detailed content of How Can I Clip Text with an Ellipsis in Table Cells Using CSS?. For more information, please follow other related articles on the PHP Chinese website!