Question

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

Answer 1

通常，您可以将client[Height|Width]与scroll[Height|Width]进行比较以便检测到这一点......但是当溢出可见时，值将是相同的。因此，检测程序必须考虑到这一点：

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

在FF3，FF40.0.2，IE6，Chrome 0.2.149.30中测试。

Answer 2

尝试比较element.scrollHeight / element.scrollWidth与element.offsetHeight / element.offsetWidth

http://developer.mozilla.org/en/DOM/element.offsetWidth
http://developer.mozilla.org/en/DOM/element.offsetHeight
http://developer.mozilla.org/en/DOM/element.scrollWidth
http://developer.mozilla.org/en/DOM/element.scrollHeight

Answer 3

我不认为这个答案是完美的。有时，即使文本溢出，scrollWidth / clientWidth / offsetWidth也是相同的。

这适用于Chrome，但不适用于IE和Firefox。

最后，我尝试了这个答案：HTML text-overflow ellipsis detection

它完美无缺，适用于任何地方。所以我选择了这个，也许你可以试试，你不会失望。

Answer 4

另一种方法是将元素宽度与其父元素的宽度进行比较：

function checkOverflow(elem) {
    const elemWidth = elem.getBoundingClientRect().width
    const parentWidth = elem.parentElement.getBoundingClientRect().width

    return elemWidth > parentWidth
}

Answer 5

使用jQuery，您可以做到：

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

    console.log("element is overflowing");

} else {

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

}

根据需要更改为.prop('scrollWidth')和.width()。

Answer 6

这是一个javascript解决方案（使用Mootools），它将减小字体大小以适应elHeader的范围。

CREATE PROCEDURE [dbo].[GeneradorTablas] 
    @Tabla AS VARCHAR(100)
AS 
BEGIN 
    DECLARE @Script AS VARCHAR(MAX) ='CREATE TABLE [dbo].[' + @Tabla + '](' + CHAR(13) 
    DECLARE @Columnas As TABLE(indice INT, Columna VARCHAR(1000))
    INSERT INTO @Columnas 
    SELECT
        ROW_NUMBER()OVER(ORDER BY C.column_id),
        '   [' + C.name + '] [' + TY.name + ']' + 
        CASE WHEN 
            TY.name='nvarchar' OR 
            TY.name='nchar' OR 
            TY.name='char' OR 
            TY.name='varbinary' OR 
            TY.name='varchar' OR 
            TY.name='text' THEN 
                '(' + CASE WHEN C.max_length>0 THEN CAST(C.max_length AS VARCHAR(10)) ELSE 'MAX' END + ')' ELSE '' 
        END + 
        CASE WHEN C.is_identity=1 THEN ' IDENTITY(1,1)' ELSE '' END +
        ' ' + CASE WHEN C.is_nullable=1 THEN 'NULL' ELSE 'NOT NULL' END + ',' 
    FROM SYS.COLUMNS AS C 
        INNER JOIN SYS.TYPES AS TY ON C.system_type_id=TY.system_type_id
        INNER JOIN SYS.TABLES AS T ON C.object_id=T.object_id
    WHERE T.name=@Tabla 

    DECLARE @i AS INT
    SELECT @i=MIN(indice) FROM @Columnas
    WHILE @i IS NOT NULL
    BEGIN
        SELECT @Script+=Columna+CHAR(13) FROM @Columnas WHERE indice=@i
        SELECT @i=MIN(indice) FROM @Columnas WHERE indice>@i
    END

    SET @Script=SUBSTRING(@Script,0,LEN(@Script)-1) + CHAR(13) + ')'
    PRINT @Script
END 
GO

elHeader的CSS：

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的宽度。

确定HTML元素的内容是否溢出

6 个答案: