如何在没有滚动条的情况下检测 HTML 内容溢出？

在没有滚动条的情况下检测 HTML 元素中的内容溢出

许多开发人员面临着确定 HTML 元素的内容何时超出其可见边界的挑战，特别是如果滚动条不存在的话。当元素的溢出属性设置为“可见”时，此任务变得更加复杂。

解决方案

解决方案在于比较元素的客户端尺寸（[高度|宽度] ]）及其滚动尺寸（[高度|宽度]）。但是，当溢出可见时，这些值将相等。为了解决这个问题，我们可以暂时将溢出样式修改为“隐藏”，检查溢出情况，然后恢复原来的溢出值。

实现

下面的代码片段提供了一个 JavaScript 函数 checkOverflow()，它执行此操作检测：

// Determine 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;
}

用法

对目标元素调用 checkOverflow() 函数以确定是否有溢出内容。该函数返回一个布尔值，指示是否存在溢出。

测试

此例程已在 Firefox 3、Firefox 40.0.2、Internet Explorer 中成功测试6、Chrome 0.2.149.30。

以上是如何在没有滚动条的情况下检测 HTML 内容溢出？的详细内容。更多信息请关注PHP中文网其他相关文章！