JS: Vérifie si le texte dépasse la largeur du conteneur

Question

Existe-t-il une fonction js ou jQuery qui détectera si le innerHTML ou le texte est dans un certain nombre de pixels à partir de son conteneur?

Je devrai faire cela pour quelques centaines d'éléments sur une page, donc la performance est un peu importante.

Exemple - déterminer si le texte dans ce <td> est dans 5px de dépasser sa largeur:

<td class="cell"> 
    12,3423 
</td> 

.cell { 
    width: 20px; 
} 

Answer 1

Essayez cette

$.fn.textWidth = function(){ 
    var html_org = $(this).html(); 
    var html_calc = '<span>' + html_org + '</span>'; 
    $(this).html(html_calc); 
    var width = $(this).find('span:first').width(); 
    $(this).html(html_org); 
    return width; 
}; 

$(function(){ 
    alert($('.cell').textWidth());  
}); 

Fiddle http://jsfiddle.net/Hpyay/

Il peut être double possible (et ci-dessus le code copié de) de Calculating text width

Answer 2

vous devez envelopper dans quelque chose (p, div quel que soit), vous obtenez que la largeur de l'élément/hauteur

<td><p>text...</p></td> 

faire votre calcul de $("td>p").width()

mais si elle est seulement ou une image de texte (avec un max-width:100%) sauf si vous ne faites pas d'emballage ...