cssoverflowcss-tablestablecell

CSS Trim Table Content

I am looking for a way to use CSS to trim long content from a table cell. For example. say a given cell contains content which is way too long. The width of the table is adjusted to fit this really long content. However, since the table already consumes 100% width, a lot of the table spills out side of the window to fit this content.

So, my question is, is there a way that I can use CSS (preferably < CSS3 for better IE compatibility) to show text in a table cell up to the cell's width, then hide any overflow with out pushing out the width of the table?

Solution

  • This is supported in all browsers apart from Firefox (I think). Elipsis produces ... at truncated text and clip just clips text...

    td {
  text-overflow: ellipsis;
  /* or text-overflow: clip; */
}