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

我有一个html标记，我想在其中为外部元素和内部span添加省略号，后者也有内联块

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>

---

这不起作用。

不太清楚。。你想要什么？记住省略号作用于文本而不是另一个内部元素。我想在外部元素上应用省略号。。检查演示，外部跨距和名为ellipsis的类将直接在外部跨距下的文本上工作。你想让它考虑每个内部跨度中的测试吗？那么你想要一个圆边框吗？如果内部元素是“代码>内联< /代码>显示，它是有效的：我不确定它是否能与<代码> >内联< /代码>显示之外的任何东西一起工作。

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

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