Javascript 确定HTML元素'；s的内容溢出

我可以使用JavaScript检查（不管滚动条）HTML元素是否溢出其内容吗？例如，一个大小固定的长div，溢出属性设置为可见，元素上没有滚动条。

尝试比较

元素。滚动高度
/
元素。滚动宽度
到
元素。偏移方向
/
元素。偏移宽度







通常，您可以将
客户端[高度|宽度]
与
滚动[高度|宽度]
进行比较，以检测此。。。但当溢出可见时，值将相同。因此，检测例程必须考虑到这一点：

// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
function checkOverflow(el)
{
   var curOverflow = el.style.overflow;

   if ( !curOverflow || curOverflow === "visible" )
      el.style.overflow = "hidden";

   var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight;

   el.style.overflow = curOverflow;

   return isOverflowing;
}

//确定传递的元素是否溢出其边界，
//垂直或水平。
//将临时修改“溢出”样式以检测此情况
//如果必要的话。
函数检查溢出（el）
{
var curOverflow=el.style.overflow；
如果（！curOverflow | | curOverflow==“可见”）
el.style.overflow=“隐藏”；
var isoverflow=el.clientWidth

在FF3、FF40.0.2、IE6、Chrome 0.2.149.30中测试。
我认为这个答案并不完美。有时，即使文本溢出，scrollWidth/clientWidth/offsetWidth也会相同

这在Chrome中效果很好，但在IE和Firefox中效果不好

最后，我尝试了这个答案：

它非常完美，在任何地方都能很好地工作。所以我选择了这个，也许你可以试试，你不会失望的
 这是一个javascript解决方案（使用Mootools），它将减小字体大小以适应页眉的边界

while (elHeader.clientWidth < elHeader.scrollWidth || elHeader.clientHeight < elHeader.scrollHeight) {
  var f = parseInt(elHeader.getStyle('font-size'), 10);
  f--;
  elHeader.setStyle('font-size', f + 'px');
}

注意elHeader的包装设置elHeader的宽度。
使用jQuery，您可以执行以下操作：

if ( $(".inner-element").prop('scrollHeight') > $(".inner-element").height() ) {

    console.log("element is overflowing");

} else {

    console.log("element is not overflowing");

}

如果需要，请更改为
.prop（'scrollWidth'）
和
.width（）
。
另一种方法是将元素宽度与其父元素的宽度进行比较：

函数检查溢出（elem）{
常量elemWidth=elem.getBoundingClientRect（）.width
const parentWidth=elem.parentElement.getBoundingClientRect（）.width
返回elemWidth>parentWidth
}
谢谢你，肖格。。。我认为，检测例程是我所需要的，因为我使用溢出（隐藏/可见），我有一个类似的问题，我试图找出包含元素的哪些部分隐藏了溢出。我想知道，在样式短暂更改时，这是否会出现短时间闪烁？+1。这适用于现代浏览器（包括至少Chrome40和撰写本文时的其他当前版本浏览器）。不适用于MS Edge。有时内容没有溢出，但
clientWidth
和
scrollWidth
相差1px。我建议删除或取消注释这个答案，因为它有一些缺陷。我一开始使用它，但它不能完美地与一些特殊的css样式配合使用。
if ( $(".inner-element").prop('scrollHeight') > $(".inner-element").height() ) {

    console.log("element is overflowing");

} else {

    console.log("element is not overflowing");

}