javascript - How to apply ellipsis to outer span with inline block?

Question

I have a html tag, in which i want to add ellipsis to the outer element and inside span which is also have inline-block.

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

DEMO

This doesnt work..