Why doesn t CSS ellipsis work in table cell

Question

Consider the following example   live demo here    x000D   x000D    function     x000D    console log  width          td   width     x000D      x000D  td   x000D    border  1px solid black  x000D    width  50px  x000D    overflow  hidden  x000D    text-overflow  ellipsis  x000D    white-space  nowrap  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt table gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td gt Hello Stack Overflow lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    The output is  width   139  and the ellipsis doesn t appear   What am I missing here

User · Accepted Answer

Apparently  adding   td     display  block     or inline-block        solves the problem as well     Another possible solution is to set table-layout  fixed  for the table  and also set it s width  For example  http   jsfiddle net fd3Zx 5

User · Answer

As said before  you can use td   display  block    but this defeats the purpose of using a table   You can use table   table-layout  fixed    but maybe you want it to behave differently for some colums   So the best way to achieve what you want would be to wrap your text in a  lt div gt  and apply your CSS to the  lt div gt   not to the  lt td gt   like this    td     border  1px solid black    td  gt  div     width  50px    overflow  hidden    text-overflow  ellipsis    white-space  nowrap

User · Answer

Instead of using ellipsis to solve the problem of overflowing text  I found that a disabled and styled input looked better and still allows the user to view and select the entire string if they need to    lt input disabled  disabled  style  border  0  padding  0  margin  0    gt    It looks like a text field but is highlight-able so more user friendly

User · Answer

It s also important to put  table-layout fixed    Onto the containing table  so it operates well in IE9  if your utilize max-width  as well

User · Answer

Check box-sizing css property of your td elements  I had problem with css template which sets it to border-box value  You need set box-sizing  content-box

User · Answer

Leave your tables as they are  Just wrap the content inside the TD s with a span that has the truncation CSS applied      CSS     truncate       width  50px    your fixed width        white-space  nowrap      overflow  hidden      text-overflow  ellipsis      display  block     this fixes your issue        lt  -- HTML -- gt   lt table gt       lt tbody gt           lt tr gt               lt td gt                   lt span class  truncate  gt                      Table data to be truncated if it s too long                   lt  span gt               lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt

User · Answer

Try using max-width instead of width  the table will still calculate the width automatically   Works even in ie11  with ie8 compatibility mode     x000D   x000D  td max-width-50   x000D    border  1px solid black  x000D    max-width  50px  x000D    overflow  hidden  x000D    text-overflow  ellipsis  x000D    white-space  nowrap  x000D    x000D   lt table gt  x000D     lt tbody gt  x000D       lt tr gt  x000D         lt td class  max-width-50  gt Hello Stack Overflow lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Hello Stack Overflow lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td gt Hello Stack Overflow lt  td gt  x000D       lt  tr gt  x000D     lt  tbody gt  x000D   lt  table gt  x000D   x000D   x000D    jsfiddle

User · Answer

Demo page For tables with dynamic width  I found the below way to produce satisfying results  Each  lt th gt  which is wished to have trimmed-text ability should have an inner wrapping element which wraps the contents of the  lt th gt  allow text-overflow to work   The real trick is to set max-width  on the  lt th gt   in vw units   This will effectively cause the element s width to be  quot bound quot  to the viewport width  browser window  and will result in a responsive content clipping  Set the vw units to a satisfying value needed  Minimal CSS  th  max-width 10vw           th  gt   wrap      text-overflow ellipsis     overflow hidden     white-space nowrap      Demo  with editable texts    x000D   x000D  document designMode  on  x000D  table     font  18px Arial    width  40     margin  1em auto    color   333    border  1px solid rgba 153  153  153  0 4      table td  table th     text-align  left    padding  1 2em 20px    white-space  nowrap    border-left  1px solid rgba 153  153  153  0 4      table td first-child  table th first-child     border-left  0     table th     border-bottom  1px solid rgba 153  153  153  0 4     font-weight  400    text-transform  uppercase    max-width  10vw     table th  gt   wrap     text-overflow  ellipsis    overflow  hidden    white-space  nowrap    x000D   lt table gt       lt thead gt           lt tr gt               lt th gt                   lt div class  wrap  title  Some long title  gt Some long title lt  div gt               lt  th gt               lt th gt                   lt div class  wrap  gt Short lt  div gt               lt  th gt               lt th gt                   lt div class  wrap  gt medium one lt  div gt               lt  th gt               lt th gt                   lt div class  wrap  title  endlessly super long title which no developer likes to see  gt endlessly super long title which no developer likes to see lt  div gt               lt  th gt           lt  tr gt       lt  thead gt       lt tbody gt           lt tr gt               lt td gt - lt  td gt               lt td gt - lt  td gt               lt td gt - lt  td gt               lt td gt very long text here lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt  x000D   x000D   x000D

User · Answer

I ve tried many of the above solutions but none of them felt flexible or satisfying  This little hack with max-width  1px can be applied directly to the td element  truncated-cell      max-width  1px     white-space  nowrap     overflow  hidden     text-overflow  ellipsis

User · Answer

Just offering an alternative as I had this problem and none of the other answers here had the desired effect I wanted  So instead I used a list  Now semantically the information I was outputting could have been regarded as both tabular data but also listed data   So in the end what I did was    lt ul gt       lt li class  group  gt           lt span class  title  gt     lt  span gt           lt span class  description  gt     lt  span gt           lt span class  mp3-player  gt     lt  span gt           lt span class  download  gt     lt  span gt           lt span class  shortlist  gt     lt  span gt       lt  li gt       lt  -- looped  lt li gt  -- gt   lt  ul gt    So basically ul is table  li is tr  and span is td   Then in CSS I set the span elements to be display block  and float left   I prefer that combination to inline-block as it ll work in older versions of IE  to clear the float effect see  http   css-tricks com snippets css clear-fix   and to also have the ellipses   span       display  block      float  left      width  100           truncate when long     overflow  hidden      text-overflow  ellipsis      white-space  nowrap      Then all you do is set the max-widths of your spans and that ll give the list an appearance of a table

User · Answer

If you don t want to set max-width to td  like in this answer   you can set max-width to div   function so hack       function so hack     http   jsfiddle net fd3Zx 754  function so hack      function so hack       Note  100  doesn t work  but 99  does the trick in FF  Other modern browsers doesn t need silly div hacks    td     border  1px solid black      padding-left 5px      padding-right 5px    td div      max-width  99       overflow  hidden      text-overflow  ellipsis      white-space  nowrap

[html] Why doesn't CSS ellipsis work in table cell?

Examples related to html

Examples related to css

Examples related to ellipsis