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

Question

我已经看到了使用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中使用这样的东西但是超出规格并不是我的游戏.

如果它不存在,你认为它会有用吗？

谢谢!

Answer 1

我不知道CSS规范的任何部分,这是可能的.选择器Level 4支持许多新的伪类(以及用于检查输入元素状态的一些非常有用的类),但这些实际上都不能检查条件是否溢出等条件.您仍然必须通过Javascript执行此操作.

Answer 2

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

考虑以下：

.box {
    height: 100px;
}

.box:overflowing {
    height: 200px;
}

.content {
    height: 150px;
}

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