javascript - インラインブロックで外側のスパンに省略記号を適用するには?

Question

私はhtmlタグを持っています.外側の要素と内側のスパンに省略記号を追加したいのですが、これにはインラインブロックもあります.

HTML :

<span class="ellipsis">
   <span class="tag">Test</span>
   <span class="tag">Test1</span>
   <span class="tag">Test2</span>
   <span class="tag">Test3</span>
   <span class="tag">Test4</span>
   <span class="tag">Test5</span>
   <span class="tag">Test6</span>
   <span class="tag">Test7</span>
</span>

CSS :

.ellipsis {
      width: 100px;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
 }

.tag {
      display : inline-block;
      background-color : green;
 }

デモ

これはうまくいきません..