Détection des ellipses dans le cadre du dépassement de texte HTML

Question

J'ai une collection d'éléments de bloc sur une page. Les règles CSS white-space, overflow, text-overflow sont définies pour que le texte qui déborde soit coupé et qu'une ellipse soit utilisée.

Cependant, tous les éléments ne débordent pas.

Est-il possible d'utiliser le javascript pour détecter les éléments qui débordent ?

Merci.

Ajouté : exemple de structure HTML avec laquelle je travaille.

<td><span>Normal text</span></td>
<td><span>Long text that will be trimmed text</span></td>

Les éléments SPAN tiennent toujours dans les cellules, la règle de l'ellipse est appliquée. Je veux détecter quand l'ellipse est appliquée au contenu textuel du SPAN.

Answer 1

Essayez cette fonction JS, en passant l'élément span comme argument :

function isEllipsisActive(e) {
     return (e.offsetWidth < e.scrollWidth);
}

Answer 2

Il fut un temps où j'avais besoin de faire cela, et la seule solution fiable pour tous les navigateurs que j'ai trouvée était hack job. Je ne suis pas le plus grand fan de ce genre de solution, mais elle produit certainement le bon résultat à chaque fois.

L'idée est de cloner l'élément, de supprimer toute largeur de délimitation et de tester si l'élément cloné est plus large que l'original. Si c'est le cas, vous savez qu'il a été tronqué.

Par exemple, en utilisant jQuery :

var $element = $('#element-to-test');
var $c = $element
           .clone()
           .css({display: 'inline', width: 'auto', visibility: 'hidden'})
           .appendTo('body');

if( $c.width() > $element.width() ) {
    // text was truncated. 
    // do what you need to do
}

$c.remove();

J'ai fait un jsFiddle pour démontrer cela, http://jsfiddle.net/cgzW8/2/

Vous pouvez même créer votre propre pseudo-sélecteur personnalisé pour jQuery :

$.expr[':'].truncated = function(obj) {
  var $this = $(obj);
  var $c = $this
             .clone()
             .css({display: 'inline', width: 'auto', visibility: 'hidden'})
             .appendTo('body');

  var c_width = $c.width();
  $c.remove();

  if ( c_width > $this.width() )
    return true;
  else
    return false;
};

Utilisez-le ensuite pour trouver des éléments

$truncated_elements = $('.my-selector:truncated');

Démonstration : http://jsfiddle.net/cgzW8/293/

J'espère que ça vous aidera, même si c'est un peu compliqué.

Answer 3

En ajoutant à la réponse de italo, vous pouvez également le faire avec jQuery.

 function isEllipsisActive($jQueryObject) {
    return ($jQueryObject.width() < $jQueryObject[0].scrollWidth);
}
 

En outre, comme l'a souligné Smoky, vous souhaiterez peut-être utiliser jQuery outerWidth () au lieu de width ().

 function isEllipsisActive($jQueryObject) {
    return ($jQueryObject.outerWidth() < $jQueryObject[0].scrollWidth);
}