Détermine si le contenu d'un élément HTML déborde

Question

Puis-je utiliser JavaScript pour vérifier (indépendamment des barres de défilement) si un élément HTML a débordé son contenu? Par exemple, une div longue avec une petite taille fixe, la propriété overflow définie sur visible et aucune barre de défilement sur l'élément.

Answer 1

Normalement, vous pouvez comparer les client[Height|Width] avec scroll[Height|Width] pour pour détecter ceci ... mais les valeurs seront les mêmes quand le débordement est visible. Ainsi, une routine de détection doit tenir compte:

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

testé dans FF3, FF40.0.2, IE6, Chrome 0.2.149.30.

Answer 2

Essayez de comparer 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

Je ne pense pas que cette réponse soit parfaite. Parfois, scrollWidth/clientWidth/offsetWidth sont identiques même si le texte est overflow.

Cela fonctionne bien dans Chrome, mais pas dans IE et Firefox.

Enfin, j'ai essayé cette réponse: HTML text-overflow ellipsis detection

Il est parfait et fonctionne bien partout. Donc, je choisis cela, peut-être que vous pouvez essayer, vous ne serez pas déçu.

Answer 4

Ceci est une solution javascript (avec Mootools) qui réduira la taille de la police pour s'adapter aux limites d'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'); 
} 

Le CSS de elHeader:

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

Notez l'emballage de elHeader définit la largeur elHeader.