26

我已经看到有关使用 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 中拥有类似的东西，但倾注规范不是我的游戏。

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

谢谢！

4

3 回答 3

12

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

于 2013-09-17T07:59:20.290 回答
7

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

考虑以下：

.box {
    height: 100px;
}

.box:overflowing {
    height: 200px;
}

.content {
    height: 150px;
}

现在如果盒子溢出了，它的高度是 200px，这意味着它不再溢出，这意味着它的高度是 100px，这意味着它现在正在溢出……</p>

于 2020-02-11T07:45:48.567 回答
1

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

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

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

于 2020-09-30T16:52:46.503 回答