html - span 元素中的文本溢出未在元素宽度之外切割 texta

Question

我正在尝试制作一个内部有 3 个跨度的 div，其中中间的跨度应该“压缩”，即当 div 的尺寸较小时剪切多余的文本。

我要找的结果是

A Very lon... A
          ^ here it should get cut with "text-overflow: ellipsis;" 

不知何故，text-overflow: ellipsis; 未应用于跨度。

知道我错过了什么吗？

尝试了 width、display、overflow 似乎没有任何效果...测试了 Chrome 和 Firefox。

div {
  border-radius: 5px;
  border: 1px solid #333;
  padding: 10px 20px;
  width: 100px;
}

div span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#long-text {
  width: 20px;
}

<div>
  <span>A</span>
  <span id="long-text">Very long text here....</span>
  <span>A</span>
</div>

Answer 1

span 是一个内联元素。它没有宽度或高度。因此请为 span 元素尝试 display:inline-block。然后 text-overflow: ellipsis; 将起作用

div {
  border-radius: 5px;
  border: 1px solid #333;
  padding: 10px 20px;
  width: 100px;
}

div span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display:inline-block;
}

#long-text {
  width: 50px;
}

<div>
    <span>A</span>
    <span id="long-text">Very long text here....</span>
    <span>A</span>
</div>