How can I hide extra divs with an ellipsis?

Question

I have a tag input field and I need to show just as many as will fit into the fake "input" div surrounding it, like this:

<div class="btn btn-secondary">
  <span class="tag">Tag 1</span>
  <span class="tag">Tag 2</span>
  <span class="tag">Tag 3</span>
  <span class="tag">Tag 4</span>
  <input>
</div>

(I add tags programatically there, an Angular component). My outer div with the button class is pretending to be an input, and inside I show current tags (styled) and the actual input to the right of them. The goal is to show a few tags, as much as will fit, and then leave a bit of space for the input, like this:

________________________________
| tag1  tag2  tag3  ... _INPUT_ |
---------------------------------

The tags are styled (and with an X button). So if I remove a few tags, I need to remove the ellipsis ( ... ) and if I add more, they are not to be shown (they're in a tooltip).

The input has a minimum width, but it should fill up space if there aren't any (or enough) tags. So, tag tag inpuuuuuuuuuuuuut all the way to the right border. And if we remove one tag, the input fills up the space, if we add one, input shrinks (up until minWidth).

What would be a common-sense way to doing this? I am thinking that I would need to have each tag calculate and report it's width, then have that wrapper div pick how ever many will fit and hide the others, and add the ellipsis tag if needed. Is there a simpler way (IE11 minimum support needed)?

Answer 1

Here is a crazy idea using some flex and positionning (you may have to adjust some values depending on your situation)

 .btn { width: 310px; border: 1px solid; display: flex; height: 20px; margin-bottom: 10px; } input { width: 170px; } .btn > div { flex: 1; position: relative; height: 100%; } .btn > div > div { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; } .btn > div > div:after { content: "..."; position: absolute; right: 2px; bottom: 5px; } .tag { background: #fff; position: relative; z-index: 2; }

 <div class="btn"> <div> <div> <span class="tag">Tag 1</span> <span class="tag">Tag 2</span> <span class="tag">Tag 3</span> </div> </div> <input> </div> <div class="btn"> <div> <div> <span class="tag">Tag 1</span> <span class="tag">Tag 2</span> <span class="tag">Tag 3</span> <span class="tag">Tag 4</span> <span class="tag">Tag 5</span> </div> </div> <input> </div> <div class="btn"> <div> <div> <span class="tag">Tag 1</span> <span class="tag">Tag 2</span> </div> </div> <input> </div> <div class="btn"> <div> <div> <span class="tag">Tag 1</span> <span class="tag">Tag 2</span> <span class="tag">Tag 3</span> <span class="tag">Tag 4</span> <span class="tag">Tag 5</span> <span class="tag">Tag 6</span> <span class="tag">Tag 7</span> </div> </div> <input> </div>

UPDATE

Now the input will stretch to the left in case there is no enough tags:

 .btn { width: 310px; border: 1px solid; display: flex; height: 20px; margin-bottom: 10px; overflow: hidden; } input { flex: 1; min-width: 170px; } .btn > div { position: relative; height: 100%; overflow: hidden; } .btn > div:after { content: "..."; position: absolute; right: 2px; bottom: 5px; } .tag { background: #fff; position: relative; z-index: 2; }

 <div class="btn"> <div> <span class="tag">Tag 1</span> <span class="tag">Tag 2</span> <span class="tag">Tag 3</span> </div> <input> </div> <div class="btn"> <div> <span class="tag">Tag 1</span> <span class="tag">Tag 2</span> <span class="tag">Tag 3</span> <span class="tag">Tag 4</span> <span class="tag">Tag 5</span> </div> <input> </div> <div class="btn"> <div> <span class="tag">Tag 1</span> <span class="tag">Tag 2</span> </div> <input> </div> <div class="btn"> <div> <span class="tag">Tag 1</span> <span class="tag">Tag 2</span> <span class="tag">Tag 3</span> <span class="tag">Tag 4</span> <span class="tag">Tag 5</span> <span class="tag">Tag 6</span> <span class="tag">Tag 7</span> </div> <input> </div> <div class="btn"> <div> <span class="tag">Tag 1</span> </div> <input> </div> <div class="btn"> <div> </div> <input> </div>

Answer 2

<div class="btn btn-secondary">
  <div class="tag-box">
    <span class="tag">Tag 1</span>
    <span class="tag">Tag 223131</span>
    <span class="tag">Tag 31231</span>
    <span class="tag">Tag 4</span>
    <span class="tag">Tag 5</span>
  </div>
  <input>
</div>

.tag-box {
    display: block;
    border: 1px solid;
    max-width: 140px;
    padding: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-box .tag {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
}

https://jsfiddle.net/dm7bmzky/34/