CSS text-overflow in a table cell?

by

To 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:

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

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 {width: 100%;}
td
{
 max-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
td.column_a {width: 30%;}
td.column_b {width: 70%;}

Historical: For IE 9 (or less) you need to have this in your HTML, to fix an IE-specific rendering issue

<!--[if IE]>
<style>
table {table-layout: fixed; width: 100px;}
</style>
<![endif]-->

More Related Contents:

  1. Limit text length to n lines using CSS
  2. Overflow-x:hidden doesn’t prevent content from overflowing in mobile browsers
  3. parent & child with position fixed, parent overflow:hidden bug
  4. Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?
  5. CSS – Overflow: Scroll; – Always show vertical scroll bar?
  6. Why does ‘overflow: auto’ clear floats? And why are clear floats needed?
  7. firefox overflow-y not working with nested flexbox
  8. Make child visible outside an overflow:hidden parent
  9. Div height 100% and expands to fit content [duplicate]
  10. How to make the overflow CSS property work with hidden as value
  11. Overflow to left instead of right
  12. Make floating child visible outside an overflow:hidden parent
  13. CSS3 property webkit-overflow-scrolling:touch ERROR
  14. CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
  15. How to ignore parent element’s overflow:hidden in css
  16. Have a fixed position div that needs to scroll if content overflows
  17. Issue when centering vertically with flexbox when heights are unknown
  18. Horizontal scroll in DIV with many small DIV’s inside (no text)
  19. overflow: hidden on div and body, different behavior
  20. The page moves to the left
  21. How to override !important?
  22. Does height and width not apply to span?
  23. CSS disable hover effect
  24. Dynamic Sass Variables
  25. Symfony2 – Assetic – load images in CSS
  26. Styling Password Fields in CSS
  27. Are CSS selectors case-sensitive?
  28. Is there a way to apply styles to Safari only?
  29. The difference between flex:1 and flex-grow:1
  30. CSS: transform: translate(-50%, -50%) makes texts blurry [duplicate]

Leave a Comment