text-overflow ellipsis not working

Question

This is what I tried  see here    body       overflow  hidden     span       border  solid 2px blue      white-space  nowrap      text-overflow  ellipsis      Essentially  I want the span to shrink with ellipsis when the window is made small  What did I do wrong

User · Answer

You may try using ellipsis by adding the following in CSS:

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

But it seems like this code just applies to one-line trim. More ways to trim text and show ellipsis can be found in this website: http://blog.sanuker.com/?p=631

User · Answer

word-wrap  break-word    this and only this did the job for me  for a    lt pre gt   lt  pre gt     tag  everthing else failed to do the ellipsis

User · Answer

I was having an issue with ellipsis under chrome  Turning on white-space  nowrap seemed to fix it    max-width  95px  max-height  20px  overflow  hidden  display  inline-block  text-overflow  ellipsis  border  solid 1px black  font-size  12pt  text-align  right  white-space  nowrap

User · Answer

For multiple lines  In chrome  you can apply this css if you need to apply ellipsis on multiple lines   You can also add width in your css to specify element of certain width    x000D   x000D   multi-line-ellipsis   x000D      overflow  hidden  x000D      display  -webkit-box  x000D      -webkit-line-clamp  3  x000D      -webkit-box-orient  vertical  x000D    x000D   lt p class  multi-line-ellipsis  gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  lt  p gt  x000D   x000D   x000D

User · Answer

Without Fixed Width For those of us that do not want to use fixed-width  it also works using display  inline-grid  So along with required properties  you just add display span       overflow  hidden      white-space  nowrap      text-overflow  ellipsis      display  inline-grid

User · Answer

Make sure you have a block element  a maximum size and set overflow to hidden   Tested in IE9 and FF 7   http   jsfiddle net uh9zD   div       border  solid 2px blue      white-space  nowrap      overflow  hidden      text-overflow  ellipsis      width  50px

User · Answer

For multi-lines in Chrome use    display  inline-block  overflow  hidden  text-overflow  ellipsis  display  -webkit-box  -webkit-line-clamp  2     max nb lines to show -webkit-box-orient  vertical    Inspired from youtube  -

User · Answer

Add the Following lines in CSS for ellipsis to work        p        display  block     change it as per your requirement      overflow  hidden       text-overflow  ellipsis       white-space  nowrap

User · Answer

Just a headsup for anyone who may stumble across this    My h2 was inheriting   text-rendering  optimizelegibility     Changed to text-rendering  none  for fix   which was not allowing ellipsis  Apparently this is very finickey eh

User · Answer

You need to have CSS overflow  width  or max-width   display  and white-space  http   jsfiddle net HerrSerker kaJ3L 1  span       border  solid 2px blue      white-space  nowrap      text-overflow  ellipsis      width  100px      display  block      overflow  hidden     x000D   x000D  body       overflow  hidden     span       border  solid 2px blue      white-space  nowrap      text-overflow  ellipsis      width  100px      display  block      overflow  hidden   x000D   lt span gt Test test test test test test lt  span gt  x000D   x000D   x000D    Addendum If you want an overview of techniques to do line clamping  Multiline Overflow Ellipses   look at this CSS-Tricks page  https   css-tricks com line-clampin  Addendum2  May 2019  As this link claims  Firefox 68 will support -webkit-line-clamp

User · Answer

Add this below code for where you likes to  example  p     display  block     Fallback for non-webkit       display  -webkit-box     max-width  400px     margin  0 auto     -webkit-line-clamp  2     -webkit-box-orient  vertical     overflow  hidden     text-overflow  ellipsis

[html] text-overflow: ellipsis not working

Examples related to html

Examples related to css