CSS * only *检测HTML中的文本溢出？ [英] CSS *only* detection of text overflows in HTML?

问题描述

我已经看到使用JavaScript检测和处理溢出HTML元素的文本的建议。但是它是2013，所以我想知道是否也许CSS规范有一个方法来检测溢出本身。

I've seen suggestions on using JavaScript for detecting and acting on text that overflows an HTML element. But it's 2013, so I was wondering if maybe the CSS spec had a way to detect overflows itself.

换句话说，如果我有一个固定大小div：

In other words if I have a fixed size div:

<div class="smart-warning" style="width:200px; height:20px; overflow:hidden">
This is my very long text that would overflow the box.
</div>

我想有一个样式，如果文本溢出， p>

I'd like to have a style that would do something if the text overflowed such as:

<style>
.smart-warning {
  border:1px solid black
}
.smart-warning:overflowing {
  border:1px solid red
}
</style>

看起来我们会在CSS中真的接近这样的东西，不是我的游戏。

It seems like we'd be really close to having something like this in CSS but pouring over the specifications is not my game.

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

If it doesn't exist, do you think it would be useful?

谢谢！

推荐答案

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

I am not aware of any part of the CSS spec, where this would be possible. Selectors Level 4 supports a lot of new pseudo-classes (and quite some useful ones for checking states on input elements) but none of these are actually able to check conditions like if a box is overflowing. You still have to do this via Javascript.

这篇关于CSS * only *检测HTML中的文本溢出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！