仅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

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

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

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

Answer 2

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

考虑以下因素：

.box {
    height: 100px;
}

.box:overflowing {
    height: 200px;
}

.content {
    height: 150px;
}

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

Answer 3

我不知道CSS规范的任何部分，在那里这是可能的。第4级选择器支持许多新的伪类（以及一些非常有用的用于检查输入元素状态的类），但这些类实际上都不能检查诸如框是否溢出之类的条件。您仍然必须通过Javascript来实现这一点。