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

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

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

显然，超出了宽度（因为溢出的部分被切断了）。我得到的最接近工作示例是当我关闭设置为 flex 的显示器时。对于块，它适用，但不适用于 flex。

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

Answer 1

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

我建议将标签包装在一个额外的<span> 标记中。然后将省略号 CSS 应用于新创建的内部 span 元素（这里是 working example。）：

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>

Answer 2

下面的示例演示了将text-overflow: ellipsis; 与 flex-box 结合使用的唯一方法：

div {
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: flex-end;
}

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

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et earum quo tenetur, neque facilis voluptates odio. Neque, facere totam sit!</span>
</div>

这是来自 CSS-Tricks 的一篇文章，可以在 here 找到。可能不是您正在寻找的解决方案，但也许您仍然可以使用它。

Answer 3

你不能在同一个元素上使用display: flex 和text-overflow: ellipsis，你可以这样做：

span {
  width: 100px;
  display: flex;
  min-width: 100px;

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

<span>
This is a block-level element
</span>