0

I have a multiple span inside a div and each span has a some text. I want to show ellipses(...) for any span element that overflow. Here is the code snippet 

.wrapper
{
   padding:2rem;
   background-color:gray;
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:20rem;
    display:inline-block;
}

.tags{
  background-color:green;
  margin:1rem;
 height:25px;
 width:35px;
 border:1px solid black;
  border-radius: 25px;
}
<div class='wrapper'>
   <span class="tags">
   some text 1
   </span>
   <span class='tags'>
   some text 2
   </span>
   <span class='tags'>
   someeee text 3
   </span>
    <span class='tags'>
   some text 4
   </span>
   <span class='tags'>
   some text 5
   </span>
</div>

What I need is ellipses for span instead of text.Something like

enter image description here

rax
  • 48
  • 5
  • You'll need javascript to check if an element is overflowing. Check this answer for an implementation of overflow and replace overflowing elements with ellipses: https://stackoverflow.com/a/9541579/13222359 Currently your `text-overflow` property is not doing anything that you want it to do. – PsiKai Mar 04 '22 at 19:44

0 Answers0