How to set CSS text-overflow in a table cell?

Spread the love

To set CSS text-overflow in a table cell, we set the max-width of the cell.

For instance, we write

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

to set the max-width to 100px set the max width of the cells.

And we add the text-overflow: ellipsis; and white-space: nowrap; to keep the text to one row and put ellipsis after the truncated text.

We then add overflow: hidden; to hide text overflowing outside the cells.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *