CSS text-overflow in a table cell

Question

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   td     overflow  hidden    text-overflow  ellipsis    white-space  nowrap      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

User · Answer

If you just want the table to auto-layout

Without using max-width, or percentage column widths, or table-layout: fixed etc.

https://jsfiddle.net/tturadqq/

How it works:

Step 1: Just let the table auto-layout do its thing.

When there's one or more columns with a lot of text, it will shrink the other columns as much as possible, then wrap the text of the long columns:

Step 2: Wrap cell contents in a div, then set that div to max-height: 1.1em

(the extra 0.1em is for characters which render a bit below the text base, like the tail of 'g' and 'y')

Step 3: Set title on the divs

This is good for accessibility, and is necessary for the little trick we'll use in a moment.

Step 4: Add a CSS ::after on the div

This is the tricky bit. We set a CSS ::after, with content: attr(title), then position that on top of the div and set text-overflow: ellipsis. I've coloured it red here to make it clear.

(Note how the long column now has a tailing ellipsis)

Step 5: Set the colour of the div text to transparent

And we're done!

User · Answer

Wrap cell content in a flex block  As a bonus  cell auto fits visible width    x000D   x000D  table   x000D    width  100   x000D    x000D   x000D  div parent   x000D    display  flex  x000D    x000D   x000D  div child   x000D    flex  1  x000D    width  1px  x000D    overflow-x  hidden  x000D    text-overflow  ellipsis  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt  x000D         lt div class  parent  gt  x000D           lt div class  child  gt  x000D            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx x000D           lt  div gt  x000D         lt div gt  x000D       lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

This worked in my case  in both Firefox and Chrome   td     max-width  0    overflow  hidden    text-overflow  ellipsis    white-space  nowrap    width  100

User · Answer

I solved this using an absolutely positioned div inside the cell  relative    td       position  relative    td  gt  div       position  absolute      white-space  nowrap      overflow  hidden      text-overflow  ellipsis      max-width  100               That s it  Then you can either add a top  value to the div or vertically center it   td  gt  div             top  0      bottom  0      margin  auto 0      height  1 5em       line height      To get some space on the right side  you can reduce the max-width a little

User · Answer

When it s in percentage table width  or you can t set fixed width on table cell  You can apply table-layout  fixed  to make it work    x000D   x000D  table   x000D    table-layout  fixed  x000D    width  100   x000D    x000D  td   x000D    text-overflow  ellipsis  x000D    white-space  nowrap  x000D    overflow  hidden  x000D    border  1px solid red  x000D    x000D   lt table gt  x000D     lt tr gt  x000D       lt td gt Lorem ipsum and dim sum yeah yeah yeah  Lorem ipsum and dim sum yeah yeah yeah  Lorem ipsum and dim sum yeah yeah yeah  Lorem ipsum and dim sum yeah yeah yeah  Lorem ipsum and dim sum yeah yeah yeah  lt  td gt  x000D       lt td gt Lorem ipsum and dim sum yeah yeah yeah  Lorem ipsum and dim sum yeah yeah yeah  Lorem ipsum and dim sum yeah yeah yeah  Lorem ipsum and dim sum yeah yeah yeah  Lorem ipsum and dim sum yeah yeah yeah  lt  td gt  x000D     lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D

User · Answer

Why does this happen   It seems this section on w3 org suggests that text-overflow applies only to block elements   11 1   Overflow Ellipsis  the    text-overflow    property  text-overflow      clip   ellipsis    lt string gt    Initial            clip    APPLIES TO         BLOCK CONTAINERS                lt  lt  lt  lt  Inherited          no   Percentages        N A   Media              visual   Computed value     as specified     The MDN says the same   This jsfiddle has your code  with a few debug modifications   which works fine if it s applied to a div instead of a td  It also has the only workaround I could quickly think of  by wrapping the contents of the td in a containing div block  However  that looks like  ugly  markup to me  so I m hoping someone else has a better solution  The code to test this looks like this    x000D   x000D  td  div   x000D    overflow  hidden  x000D    text-overflow  ellipsis  x000D    white-space  nowrap  x000D    border  1px solid red  x000D    width  80px  x000D    x000D  Works  but no tables anymore  x000D   lt div gt Lorem ipsum and dim sum yeah yeah yeah  Lorem ipsum and dim sum yeah yeah yeah  Lorem ipsum and dim sum yeah yeah yeah  Lorem ipsum and dim sum yeah yeah yeah  Lorem ipsum and dim sum yeah yeah yeah  lt  div gt  x000D   x000D  Works  but non-semantic markup required  x000D   lt table gt  lt tr gt  lt td gt  lt div gt Lorem ipsum and dim sum yeah yeah yeah  Lorem ipsum and dim sum yeah yeah yeah  Lorem ipsum and dim sum yeah yeah yeah  Lorem ipsum and dim sum yeah yeah yeah  Lorem ipsum and dim sum yeah yeah yeah  lt  div gt  lt  td gt  lt  tr gt  lt  table gt  x000D   x000D   x000D

User · Answer

It seems that if you specify table-layout  fixed  on the table element  then your styles for td should take effect  This will also affect how the cells are sized  though   Sitepoint discusses the table-layout methods a little here  http   reference sitepoint com css tableformatting

User · Answer

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  lt  -- if IE  gt   lt style gt  table  table-layout  fixed  width  100px    lt  style gt   lt   endif -- gt

User · Answer

In case you don t want to set fixed width to anything  The solution below allows you to have table cell content that is long  but must not affect the width of the parent table  nor the height of the parent row  For example where you want to have a table with width 100  that still applies auto-size feature to all other cells  Useful in data grids with  Notes  or  Comment  column or something     Add these 3 rules to your CSS    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      -ms-text-overflow  ellipsis      -o-text-overflow  ellipsis      max-width  100       min-width  0      width 100       top  0      left  0     text-overflow-dynamic-container after   text-overflow-dynamic-ellipsis after       content   -       display  inline      visibility  hidden      width  0      Format HTML like this in any table cell you want dynamic text overflow    lt td gt     lt span class  text-overflow-dynamic-container  gt       lt span class  text-overflow-dynamic-ellipsis  title     your text again for usability     gt             your long text here         lt  span gt     lt  span gt   lt  td gt    Additionally apply desired min-width  or none at all  to the table cell   Of course the fiddle  https   jsfiddle net 9wycg99v 23

User · Answer

Specifying a max-width or fixed width doesn t work for all situations  and the table should be fluid and auto-space its cells   That s what tables are for  Works on IE9 and other browsers  Use this  http   jsfiddle net maruxa1j   x000D   x000D  table       width  100      first       width  50      ellipsis       position  relative     ellipsis before       content    amp nbsp        visibility  hidden     ellipsis span       position  absolute      left  0      right  0      white-space  nowrap      overflow  hidden      text-overflow  ellipsis    x000D   lt table border  1  gt       lt thead gt           lt tr gt               lt th gt Header 1 lt  th gt               lt th gt Header 2 lt  th gt               lt th gt Header 3 lt  th gt               lt th gt Header 4 lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt tr gt               lt td class  ellipsis first  gt  lt span gt This Text Overflows and is too large for its cell  lt  span gt  lt  td gt               lt td class  ellipsis  gt  lt span gt This Text Overflows and is too large for its cell  lt  span gt  lt  td gt               lt td class  ellipsis  gt  lt span gt This Text Overflows and is too large for its cell  lt  span gt  lt  td gt               lt td class  ellipsis  gt  lt span gt This Text Overflows and is too large for its cell  lt  span gt  lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt  x000D   x000D   x000D

User · Answer

It is worked for me table       width  100       table-layout  fixed     td      text-overflow  ellipsis     white-space  nowrap

User · Answer

This is the version that works in IE 9   http   jsfiddle net s27gf2n8    lt div style  display table  table-layout  fixed  width 100      gt           lt div style  display table-row   gt               lt div style  display table-cell   gt                   lt table style  width  100   table-layout  fixed   gt                       lt div style  text-overflow ellipsis overflow hidden white-space nowrap   gt First row  Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum  lt  div gt                   lt  table gt               lt  div gt               lt div style  display table-cell   gt                  Top right Cell               lt  div gt           lt  div gt           lt div style  display table-row   gt               lt div style  display table-cell   gt                   lt table style  width  100   table-layout  fixed   gt                       lt div style  text-overflow ellipsis overflow hidden white-space nowrap   gt Second row - Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry s standard dummy text ever since the 1500s  when an unknown printer took a galley of type and scrambled it to make a type specimen book  It has survived not only five centuries  but also the leap into electronic typesetting  remaining essentially unchanged  It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum  lt  div gt                   lt  table gt               lt  div gt               lt div style  display table-cell   gt                  Bottom right cell               lt  div gt           lt  div gt       lt  div gt

[css] CSS text-overflow in a table cell?

If you just want the table to auto-layout

Examples related to css

Examples related to overflow