How Can I Hide Extra Divs With An Ellipsis?

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:

Copy

<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>