如果HTML元素溢出其内容,我可以使用JavaScript检查(无论滚动条)吗？例如,一个长小的固定大小的div,溢出属性设置为可见,并且元素上没有滚动条.

我已经看到了使用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中使用这样的东西但是超出规格并不是我的游戏.

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

谢谢!

需要制作具有以下功能的模板:

• 包含两个容器(行)
  • 顶行是固定大小
  • 底部尺寸适合最大可用垂直空间
• 应该动态调整底部容器内的文本(字体大小)以适应容器高度.

第一个问题的答案很简单,但在这里添加它,因为不知道第二个问题不依赖于它.

这里有很多问题,询问如何动态调整textarea或输入字段中的文本.但这个问题更为特殊,因为可能需要计算单词或其他一些以适应容器大小.

有人可以帮我提一下已经完成的jquery或任何其他js/css解决方案吗？

我不是一个网页设计师,只想制作一个简单的网页模板,用于调整我的文本 - 我知道一点点css - 但不是javascript - 因此要求指向任何"准备运行"的解决方案,如果存在......

编辑

检查溢出解决方案,这个答案/sf/answers/499728001/可以很好地检测垂直溢出.现在的问题是,如何将上面的溢出javascript检查添加到循环中,什么会将我的字体更改为更小.

为了更好地说明附加两个演示图像......

一些（JS 修改的）HTML 可能如下所示：

<div style="width: 50px;">1,234,567</div>

如何检测文本节点是否比容器宽？

我正在显示带有省略号的文本。在我当前的CSS中，省略号表示断字。

我需要在单词补全后显示省略号以确保适当的可读性。

以下是我的CSS

.myContainer {
  text-overflow: ellipsis;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  padding-bottom: 15px;
}

<div class="myContainer">
  Testing the dataset in path oregon location should done
</div>

我不想更改容器的宽度。单词位置未显示。

省略号应在位置字后显示（完整）