较长的文本不会显示省略号（三个点）

Question

我已经设置了如下所示的样式。

div>span {
  display: flex;
  flex: 1 0 0;
  align-self: center;
  align-items: center;
  justify-content: flex-end;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

由于某种原因，省略的三人组似乎只实现了隐藏和现在的隐藏，而不是省略。经过一些研究，我知道它与计算的可用宽度有关，但我看不出它对我有什么帮助。

显然，宽度已经超出了（因为溢出的部分被切掉了）。我得到的最接近工作示例是当我关闭设置为弯曲的显示器时。对于块它可以工作，但对于柔性则不行。

我真的很想使用 Flex，因为它解决了很多其他问题。如何调整示例，使其保留显示的灵活性并仍然省略文本？

Answer 1

这里的问题在于应用于display: flex要<span>添加省略号的元素。将其更改为display: inline-blockorblock可以解决问题，但我理解为什么要在 span 元素上使用 flex 。

我的建议是将标签包裹在一个附加<span>标签中。然后将省略号 CSS 应用于新创建的内部 span 元素（这是一个工作示例。）：

div>span {
  display: flex;
  flex: 1 1 0;
  align-self: center;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

<div>
  <span><span>{{caption}}</span></span>
  <input type="text"
         placeholder="{{caption}}"
         [ngModel]="value">
</div>