使用 text-overflow:ellipsis 时 white-space:nowrap 的替代品答案

【问题标题】：Alternatives to white-space:nowrap when using text-overflow:ellipsis使用 text-overflow:ellipsis 时 white-space:nowrap 的替代品
【发布时间】：2012-05-12 06:48:17
【问题描述】：

在他的demo page 中，PPK 说 text-overflow:ellipsis 要求（除其他外）“该框具有 white-space: nowrap 或类似的限制文本布局方式的方法。”

有谁知道他所指的其他类型的“约束”是什么？我已经尝试了所有其他空白选项，但它们都没有给我想要的东西。我不相信他所说的“类似的约束方法”的意思仅仅是“任何其他空白设置”，但我无法想到任何其他文本布局约束。

我问是因为我想在视觉截断文本之前显示最多两行文本（我使用 height:2.5em 完成），并且 white-space:nowrap 防止文本换行以填充我的空间已分配。

【问题讨论】：

标签： css

【解决方案1】：

如果你想以有用的方式使用text-overflow: ellipsis，你需要white-space: nowrap。

我不知道他会想到什么“限制文本布局方式的类似方法”。

我问是因为我想在之前显示最多两行文字视觉上截断文本

我认为 CSS 做不到。这是an answer，我说了同样的话，10 个月后有 612 次观看，没有人不同意。

【讨论】：

所以，这似乎并不完全准确。我知道 white-space:pre 也有效——但它（可以预见地）阻止文本自然换行。这让我相信有一个更通用的“布局约束”机制在起作用（类似于触发 hasLayout 的多种方式）。也就是说，我承认互联网上似乎没有找到任何纯 CSS 解决方案（而 JS 解决方案绝对很烂）。如果我发现任何东西，我会在这里发布。
仍然没有找到任何东西。不用问 PPK 本人，这可能是互联网所能做的最好的事情。