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


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


105
2017-09-27 15:29


origine


Réponses:


Normalement, vous pouvez comparer les client[Height|Width] avec scroll[Height|Width] afin de détecter cela ... mais les valeurs seront les mêmes lorsque le débordement est visible. Donc, une routine de détection doit en 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.


169
2017-09-27 15:55



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


9
2017-09-27 15:37



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

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

Enfin, j'ai essayé cette réponse: Détection des points de suspension HTML par débordement de texte

C'est parfait et fonctionne bien n'importe où. Donc je choisis ceci, peut-être que vous pouvez essayer, vous ne décevrez pas.


0
2018-04-17 02:17



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 que le wrapper d'elHeader définit la largeur d'elHeader.


-2
2018-05-24 23:43