I want to use CSS text-overflow in a table cell, such that if the text is too long to fit on one line, it will clip with an ellipsis instead of wrapping to multiple lines. Is this possible? I tried this:
But the white-space: nowrap seems to make the text (and its cell) continually expand out to the right, pushing the total width of the table beyond the width of its container. Without it, however, the text continues to wrap to multiple lines when it hits the edge of the cell.
6,206 16 16 gold badges 53 53 silver badges 58 58 bronze badges asked Mar 20, 2012 at 15:27 28.4k 29 29 gold badges 77 77 silver badges 122 122 bronze badges Table cells don't handle overflow well. Try putting a div in the cell and styling that div. Commented Mar 20, 2012 at 15:30To clip text with an ellipsis when it overflows a table cell, you will need to set the max-width CSS property on each td class for the overflow to work. No extra layout div elements are required:
For responsive layouts; use the max-width CSS property to specify the effective minimum width of the column, or just use max-width: 0; for unlimited flexibility. Also, the containing table will need a specific width, typically width: 100%; , and the columns will typically have their width set as percentage of the total width
table td < max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; >td.column_a td.column_b
Historical: For IE 9 (or less) you need to have this in your HTML, to fix an IE-specific rendering issue