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

Posted 2023-05-07

【中文标题】CSS *仅*检测 HTML 中的文本溢出？

【英文标题】：CSS-only detection of text overflows in HTML?

【发布时间】：2013-09-21 13:23:07

【问题描述】：

我看到了有关使用 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 示例：***.com/questions/7668636/…（带小提琴）、***.com/questions/7138772/…、***.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，这意味着它现在正在溢出……

【参考方案3】：

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

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

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

【讨论】：

还有一些其他要求才能使其正常工作，如下所述：***.com/questions/17779293/…