CSS text-overflow ellipsis not working

Question

I don t know why this simple CSS isn t working      x000D   x000D   app a   x000D    height  18px  x000D    width  140px  x000D    padding  0  x000D    overflow  hidden  x000D    position  relative  x000D    margin  0 5px 0 5px  x000D    text-align  center  x000D    text-decoration  none  x000D    text-overflow  ellipsis  x000D    white-space  nowrap  x000D    color   000  x000D    x000D   lt div class  app  gt  x000D     lt a href    gt Test Test Test Test Test Test lt  a gt  x000D   lt  div gt  x000D   x000D   x000D    Should cut off around the 4th  Test

User · Accepted Answer

text-overflow ellipsis  only works when the following are true    The element s width must be constrained in px  pixels   Width in    percentage  won t work  The element must have overflow hidden and white-space nowrap set    The reason you re having problems here is because the width of your a element isn t constrained  You do have a width setting  but because the element is set to display inline  i e  the default  it is ignoring it  and nothing else is constraining its width either   You can fix this by doing one of the following    Set the element to display inline-block or display block  probably the former  but depends on your layout needs   Set one of its container elements to display block and give that element a fixed width or max-width  Set the element to float left or float right  probably the former  but again  either should have the same effect as far as the ellipsis is concerned     I d suggest display inline-block  since this will have the minimum collateral impact on your layout  it works very much like the display inline that it s using currently as far as the layout is concerned  but feel free to experiment with the other points as well  I ve tried to give as much info as possible to help you understand how these things interact together  a large part of understanding CSS is about understanding how various styles work together   Here s a snippet with your code  with a display inline-block added  to show how close you were    x000D   x000D   app a   x000D    height  18px  x000D    width  140px  x000D    padding  0  x000D    overflow  hidden  x000D    position  relative  x000D    display  inline-block  x000D    margin  0 5px 0 5px  x000D    text-align  center  x000D    text-decoration  none  x000D    text-overflow  ellipsis  x000D    white-space  nowrap  x000D    color   000  x000D    x000D   lt div class  app  gt  x000D     lt a href    gt Test Test Test Test Test Test lt  a gt  x000D   lt  div gt  x000D   x000D   x000D    Useful references    https   developer mozilla org en-US docs Web CSS text-overflow https   developer mozilla org en-US docs Web CSS white-space

User · Answer

So if you reach this question because you re having trouble trying to get the ellipsis working inside a display  flex container  try adding min-width  0 to the outmost container that s overflowing its parent even though you already set a overflow  hidden to it and see how that works for you   More details and a working example on this codepen by aj-foster  Totally did the trick in my case

User · Answer

https   stackoverflow com a 53784508 5626747  Can t comment due to reputation  so I m making another answer   In this case you will also have to remove the generally suggested display  block  property from the element you set the text-overflow  ellipsis  on  or it will cut off without the     at the end

User · Answer

The accepted answer is awesome  However  you can still use   width and attain text-overflow  ellipsis  The solution is simple   display  inline-block     for em  a  span  etc  inline by default     text-overflow  ellipsis  width  calc  80       The trick is here       It seems whenever you use calc  the final value is rendered in absolute pixels  which consequentially converts 80  to something like 800px for a 1000px-width container  Therefore  instead of using width   YOUR PERCENT    use width  calc  YOUR PERCENT

User · Answer

Include the four lines written after the info for ellipsis to work   app a    color   fff   font  bold 15px 18px Arial   height  18px   margin  0 5px 0 5px   padding  0   position  relative   text-align  center   text-decoration  none   width  140px         Note  The Below 4 Lines are necessary for ellipsis to work        display  block    Change it as per your requirement      overflow  hidden   text-overflow  ellipsis   white-space  nowrap

User · Answer

I had to make some long descriptions ellipse take only one lane  while being responsive  so my solution was to let the text wrap instead of white-space  nowrap  and instead of fixed width I added fixed height    x000D   x000D  span   x000D    display  inline-block  x000D    line-height  1rem  x000D    height  1rem  x000D    overflow  hidden  x000D       OPTIONAL LINES x000D    width  75   x000D    background  green  x000D        white-space  normal  default x000D    x000D   lt span gt  x000D  Lorem ipsum dolor sit amet  consectetur adipisicing elit  Commodi quia quod reprehenderit saepe sit  Animi deleniti distinctio dolorum iste molestias reiciendis saepe  Ea eius ex  ipsam iusto laudantium natus obcaecati quas rem repellat temporibus  A alias at  atque deserunt dignissimos dolor earum  eligendi eveniet exercitationem natus non  odit sint sit tempore voluptate  Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam  voluptates  Aliquam commodi debitis delectus magnam nulla  omnis sequi sint unde voluptas voluptatum  Adipisci aliquam deserunt dolor enim facilis libero  maxime molestias  nemo neque non nostrum placeat reprehenderit  rerum ullam vel  A atque autem consectetur cum  doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel  Accusamus aspernatur at au x000D   lt  span gt  x000D   x000D   x000D

User · Answer

MUST contain     text-overflow  ellipsis    white-space  nowrap    overflow  hidden    MUST NOT contain  display  inline   SHOULD contain  position  sticky

User · Answer

In bootstrap 4  you can add a  text-truncate class to truncate the text with an ellipsis    x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 1 3 css bootstrap min css  rel  stylesheet    gt  x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 4 1 3 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt  -- Inline level -- gt  x000D   lt span class  d-inline-block text-truncate  style  max-width  250px   gt  x000D    The quick brown fox jumps over the lazy dog  x000D   lt  span gt  x000D   x000D   x000D

User · Answer

I faced the same issue and it seems like none of the solution above works for Safari  For non-safari browser  this works just fine   display  block     or in-line block according to your requirement    overflow  hidden  white-space  nowrap  text-overflow  ellipsis    For Safari  this is the one that works for me  Note that the media query to check if the browser is Safari might change over time  so just tinker with the media query if it doesn t work for you  With line-clamp property  it would also be possible to have multiple lines in the web with ellipsis  see here      Media-query for Safari-only browser   media not all and  min-resolution  0 001dpcm       media       -webkit-line-clamp  1      -webkit-box-orient  vertical      display  -webkit-box      white-space  normal

User · Answer

Write these in your css rule    display  block     or in-line block according to your requirement    overflow  hidden  white-space  nowrap  text-overflow  ellipsis

User · Answer

Also make sure word-wrap is set to normal for IE10 and below   The standards referenced below define this property s behavior as being dependent on the setting of the  text-wrap  property  However  wordWrap settings are always effective in Windows Internet Explorer because Internet Explorer does not support the  text-wrap  property   Hence in my case  word-wrap was set to break-word  inherited or by default   causing text-overflow to work in FF and Chrome  but not in IE   ms info on word-wrap property

User · Answer

You just add one line css    app a      display  inline-block

User · Answer

I have been having this problem and I wanted a solution that could easily work with dynamic widths  The solution use css grid  This is how the code looks like     css   parent        display  grid         grid-template-columns  auto 1fr           dynamic-width-child        white-space  nowrap        text-overflow  ellipsis        overflow  hidden     fixed-width-child        white-space  nowrap          html  lt div class  quot parent quot  gt     lt div class  quot dynamic-width-child quot  gt      iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii asdfhlhlafh lshd flhsd lhfaaaaaaaaaaaaaaaaaaaa    lt  div gt     lt div class  quot fixed-width-child quot  gt Why -Zed lt  div gt

User · Answer

anchor span    tags are inline elements by default  In case of inline elements width property doesn t works  So you have to convert your element to either inline-block or block level elements

User · Answer

You can also add float left  inside this class  User Apps Content  DLD App a

User · Answer

Add display  block  or display  inline-block  to your  User Apps Content  DLD App a  demo

[overflow] CSS text-overflow: ellipsis; not working?

Examples related to overflow

Examples related to ellipsis

Examples related to css