仅 CSS 检测 HTML 中的文本溢出？答案

【问题标题】：CSS-only detection of text overflows in HTML?仅 CSS 检测 HTML 中的文本溢出？
【发布时间】：2022-04-28 20:58:56
【问题描述】：

我看到了有关使用 JavaScript 检测和处理溢出 HTML 元素的文本的建议。但现在是 2013 年，所以我想知道 CSS 规范是否有办法自行检测溢出。

换句话说，如果我有一个固定大小的 div：

<div class="smart-warning" style="width:200px; height:20px; overflow:hidden">
This is my very long text that would overflow the box.
</div>

我想要一种样式，如果文本溢出，我会做一些事情，例如：

<style>
.smart-warning {
  border:1px solid black
}
.smart-warning:overflowing {
  border:1px solid red
}
</style>

看起来我们真的很接近在 CSS 中拥有类似的东西，但倾注规范不是我的游戏。

如果不存在，你觉得有用吗？

谢谢！

【问题讨论】：

我不认为只有css才有可能，但我可能错了。
Javascript 示例：stackoverflow.com/questions/7668636/…（带小提琴）、stackoverflow.com/questions/7138772/…、stackoverflow.com/questions/11773029/…
我创建了一个小提琴，它是上面提到的小提琴（实际上是 jsbin）的一个更简洁的例子，它在 JavaScript 实现上得到了更详细的说明：jsbin.com/apEHAdI/5/edit?html,css,js,output

【解决方案1】：

我不知道 CSS 规范的任何部分，这在哪里是可能的。 Selectors Level 4 支持许多新的伪类（以及一些用于检查输入元素状态的非常有用的伪类），但这些伪类实际上都不能检查框是否溢出等条件。您仍然必须通过 Javascript 来执行此操作。

【讨论】：

【解决方案2】：

使用 CSS 永远不可能做到这一点的原因是这会导致悖论。

考虑以下几点：

.box {
    height: 100px;
}

.box:overflowing {
    height: 200px;
}

.content {
    height: 150px;
}

现在如果盒子溢出，它的高度为 200px，这意味着它不再溢出，这意味着它的高度为 100px，这意味着它现在正在溢出……

【讨论】：

这些类型的陷阱可能已经发生，例如一个元素在悬停时会从用户的鼠标下方移动，这使得它不会悬停，因此它会向后移动等。限制这些悖论的一种方法是只允许通过 CSS 修改目标元素的子元素。

【解决方案3】：

如果你的 div 是单行，你可以添加：

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

此省略号属性在适合您的宽度限制的任何内容的末尾添加“...”（向溢出的 div 添加一个视觉指示器。）据我所知，它只能与 nowrap 属性结合使用。

【讨论】：