Determinar se o conteúdo de um elemento HTML está excedente

136

Posso usar JavaScript para verificar (independentemente das barras de rolagem) se um elemento HTML estourou seu conteúdo? Por exemplo, uma div longa com tamanho pequeno e fixo, a propriedade overflow definida como visível e nenhuma barra de rolagem no elemento.

javascript html css Barett
fonte

Respostas:

217

Normalmente, você pode comparar client[Height|Width]com com scroll[Height|Width]para detectar isso ... mas os valores serão os mesmos quando o estouro estiver visível. Portanto, uma rotina de detecção deve explicar isso:

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

Testado em FF3, FF40.0.2, IE6, Chrome 0.2.149.30.

Shog9
fonte
obrigado Shog9 ... a rotina de detecção é, eu penso, o que eu precisava, porque eu jogar com overflow (oculto / visível)
Eu tenho uma pergunta semelhante em stackoverflow.com/questions/2023787/…, onde estou tentando descobrir quais partes do elemento que contém o estouro oculto.
slolife
2
Gostaria de saber se isso vai dar uma piscada curta como o estilo é brevemente alterado?
Stijn de Witt
3
+1. Isso funciona em navegadores modernos (incluindo pelo menos o Chrome 40 e outros navegadores da versão atual desde a redação deste artigo).
L0j1k
1
Não funciona no MS Edge. Às vezes, o conteúdo não está transbordando mas clientWidthe scrollWidthdifere por 1px.
Jesper
2

Não acho que essa resposta seja perfeita. Às vezes, a scrollWidth / clientWidth / offsetWidth é a mesma, mesmo que o texto esteja excedendo.

Isso funciona bem no Chrome, mas não no IE e Firefox.

Por fim, tentei esta resposta: Detecção de reticências de transbordamento de texto HTML

É perfeito e funciona bem em qualquer lugar. Então eu escolho isso, talvez você possa tentar, não irá decepcionar.

zjalex
fonte
Sugiro remover ou cancelar o voto desta resposta, pois ela possui algum defeito. Eu uso isso no começo, mas ele não pode funcionar perfeitamente com algum estilo especial de CSS.
precisa saber é o seguinte
1

Outra maneira é comparar a largura do elemento com a largura do pai:

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

    return elemWidth > parentWidth
}
Alisson Nunes
fonte
0

Com o jQuery, você pode fazer:

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

    console.log("element is overflowing");

} else {

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

}

Mude para .prop('scrollWidth')e .width()se necessário.

Agu Dondo
fonte
-2

Esta é uma solução javascript (com Mootools) que reduzirá o tamanho da fonte para se ajustar aos limites do elHeader. 

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

O CSS do elHeader:

    width:100%;
    font-size:40px;
    line-height:36px;
    font-family:Arial;
    text-align:center;
    max-height:36px;
    overflow:hidden;

Observe que o invólucro do elHeader define a largura do elHeader.

user945389
fonte