How to Make Text Overflow Ellipsis Work in Table Cells?

The Elusive Ellipsis: Uncovering the CSS Challenge in Table Cells

Consider a simple scenario: you want to display a long text within a table cell, while restricting its width to 50 pixels. Naturally, you employ CSS properties to achieve this: text-overflow: ellipsis, white-space: nowrap, and a set width. However, to your surprise, the ellipsis is nowhere to be found, leaving you puzzled.

To understand the issue, let's delve into the CSS specification. The text-overflow property affects inline elements, which table cells are not by default. To enable ellipsis, we need to explicitly set display: block or display: inline-block for the table cells. This grants them inline-like behavior, allowing the text-overflow property to take effect.

Alternatively, you can opt for another approach. By setting table-layout: fixed; for the table and specifying its width, you force the width to be distributed evenly across the cells. This effectively also enables ellipsis within the cells.

Here's how the code would look with these solutions:

<code class="css">td {
  display: block; /* or inline-block */
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>

or

<code class="css">table {
  table-layout: fixed;
  width: 150px;
}
td {
  border: 1px solid black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>

Implementing either of these solutions will resolve the issue, allowing the ellipsis to work as intended within table cells.

The above is the detailed content of How to Make Text Overflow Ellipsis Work in Table Cells?. For more information, please follow other related articles on the PHP Chinese website!