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

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

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

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

Answer 1

在下面的示例中展示了结合使用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 2

这里的问题是将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 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>

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

3 个答案: