如何使用内联块将省略号应用于外跨度？

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

DEMO

这不起作用..