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

I solved this using an absolutely positioned div inside the cell (relative).

td {
    position: relative;
}
td > 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 > 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

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

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

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

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

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

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

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

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

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

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

Examples related to css

Examples related to overflow