css - `Text-overflow: ellipsis` 用于 flex 列的两个元素，在 flex 行内

Question

我正在努力实现以下目标:

使用以下方法很容易使省略号适用于一项:

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

但是在这个例子中，我有两个元素要截断。

一个需要在另一个之下。

我遇到的问题是，一旦文本进入 div(以便我可以应用 flex-direction: column)，text-overflow: ellipsis 不起作用，因为它在容器内。

如何使用 CSS 实现上述图像示例？

Answer 1

你没有向我们提供代码，所以我只是做了我自己的例子来说明它应该如何工作:

您必须限制文本容器的宽度(恰好是您添加省略号的位置)以使省略号起作用(100% 可以起作用，取决于其他样式)。

.ellipsis {
    width: 200px;  //you have to set a width for the text to be trunced
    white-space:nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

示例 jsFiddle: https://jsfiddle.net/ywcj5p26/