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规范的任何部分，这是可能的。 Selectors Level 4支持许多新的伪类（以及用于检查输入元素状态的一些非常有用的类），但这些伪类实际上都不能检查条件是否溢出的情况。你仍然必须通过Javascript。

Answer 2

CSS永远不可能做到这一点的原因是，这将导致自相矛盾。

请考虑以下内容：

.box {
    height: 100px;
}

.box:overflowing {
    height: 200px;
}

.content {
    height: 150px;
}

现在，如果框溢出了，它的高度为200px，这意味着它不再溢出，这意味着它的高度为100px，至此意味着它已经溢出了，……

Answer 3

如果您的div为一行，则可以添加：

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

此省略号属性在宽度约束内的任何适合内容的末尾添加“ ...”（向溢出的div添加可视指示器。）据我所知，它仅与nowrap属性结合使用。