Détecter si le texte a débordé

Question

Comment détecter si un texte a débordé ? Par exemple, le texte suivant est plus long que ne le permet son conteneur div. Comment puis-je le détecter en javascript ?

<div style="max-width: 100px; white-space:nowrap; overflow: hidden;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>

Answer 1

Si vous utilisez jQuery, vous pouvez essayer de comparer la largeur de la division à sa scrollWidth.

if ($('#div-id')[0].scrollWidth >  $('#div-id').innerWidth()) {
    //Text has over-flown
}

Answer 2

Vous pouvez détecter si le texte s'adaptera avant vous affichez l'élément. Vous pouvez donc utiliser cette fonction qui ne nécessite pas que l'élément soit à l'écran.

function textWidth(text, fontProp) {
    var tag = document.createElement('div')
    tag.style.position = 'absolute'
    tag.style.left = '-99in'
    tag.style.whiteSpace = 'nowrap'
    tag.style.font = fontProp
    tag.innerHTML = text

    document.body.appendChild(tag)
    var result = tag.clientWidth
    document.body.removeChild(tag)
    return result;
}

Utilisation :

if (textWidth('Text', 'bold 13px Verdana') > elementWidth) {
    ...
}

Answer 3

Plugin jQuery pour vérifier si le texte a débordé, pas très bien écrit, mais fonctionne comme il est censé fonctionner. Je poste ceci parce que je n'ai pas trouvé de plugin fonctionnel pour cela nulle part.

jQuery.fn.hasOverflown = function () {
   var res;
   var cont = $('<div>'+this.text()+'</div>').css("display", "table")
   .css("z-index", "-1").css("position", "absolute")
   .css("font-family", this.css("font-family"))
   .css("font-size", this.css("font-size"))
   .css("font-weight", this.css("font-weight")).appendTo('body');
   res = (cont.width()>this.width());
   cont.remove();
   return res;
}

Answer 4

À titre d'exemple, disons que votre div a pour nom id="d" alors vous pourriez le faire :

var d = document.getElementById('d'),
    dWider;
d.style.maxWidth = '9999em';
d.style.overflow = 'visible';
dWider = d.offsetWidth > 100;
d.style.maxWidth = '100px';
d.style.overflow = 'hidden';

Ensuite, la var dWider sera vrai si le texte déborde et faux s'il ne déborde pas.