Using CSS Text Overflow in Table Cells

When working with tables, you may encounter situations where text within a table cell exceeds the cell’s width. In such cases, you can use CSS to clip the text and display an ellipsis instead of wrapping it to multiple lines. This tutorial will guide you through the process of using CSS text overflow in table cells.

To achieve this effect, you need to apply three main CSS properties: overflow, text-overflow, and white-space. The overflow property sets what happens when content overflows an element’s box, while text-overflow specifies how to handle overflowing text, and white-space controls whether the text should wrap or not.

However, applying these properties directly to a table cell (td) can be problematic. By default, td elements are table cells, which have different layout rules than block-level elements like div. To make text-overflow work as expected, you need to ensure that your table cell behaves more like a block element.

One approach is to set a fixed width on the table cell using the max-width property. This will allow the text-overflow and white-space properties to take effect correctly. For example:

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

This method works well when you want a fixed width for your table cells. However, in some cases, you may prefer to have a more fluid layout where the table cells adjust their widths automatically.

For responsive layouts, you can use the max-width property along with percentage-based widths for the columns. This way, the table will adapt to different screen sizes while maintaining the ellipsis effect:

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%;
}

Another approach involves wrapping the content of the table cell in a div or span element and applying the necessary styles to that wrapper. This method allows for more flexibility in terms of layout, as you can control the width and other properties of the wrapper independently of the table cell:

.ellipsis {
  position: relative;
}

.ellipsis span {
  position: absolute;
  left: 0;
  right: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Then, in your HTML:

<td class="ellipsis">
  <span>This is a long piece of text that will be clipped with an ellipsis.</span>
</td>

For more complex scenarios where you need dynamic text overflow without setting fixed widths, you can use a combination of flexbox and absolute positioning. This approach involves creating a container element with display: flex and an inner span with position: absolute, which will handle the text overflow:

.text-overflow-dynamic-container {
  position: relative;
  max-width: 100%;
  padding: 0 !important;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  vertical-align: text-bottom !important;
}

.text-overflow-dynamic-ellipsis {
  position: absolute;
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
  width: 100%;
  top: 0;
  left: 0;
}

And in your HTML:

<td>
  <span class="text-overflow-dynamic-container">
    <span class="text-overflow-dynamic-ellipsis" title="...your text again for usability...">
      //...your long text here...
    </span>
  </span>
</td>

In conclusion, achieving CSS text overflow in table cells requires a good understanding of how tables and block elements interact with the overflow, text-overflow, and white-space properties. By applying these principles and using one of the methods described above, you can effectively clip long text within table cells and display an ellipsis, enhancing the readability and usability of your web pages.