Plugin jQuery : tronquage de texte

Le but de ce plugin jQuery est de tronquer le texte quand il fait plus d’une ligne. Typiquement, il s’agit de transformer :

Ceci est un texte beaucoup
trop long sur deux lignes.

En :

Ceci est un texte beaucoup...

Le plugin est téléchargeable à cette adresse.

Une démonstration est visible sur cette page.

L’intérêt du plugin est d’utiliser le plugin resize. Ainsi, lors du redimensionnement du texte (soit de la fenêtre, soit du parent ou autre), ce dernier est tronqué correctement.

Il est également possible de réafficher le texte complet au survol de la souris.

Pour l’utiliser, il suffit d’écrire :

$('selector').truncate(options);

Les options étant :

  • wrapZone : le pourcentage (entre 0 et 1) de largeur tronquée au maximum. Le plugin cherchant à tronquer entre les mots, si un mot est plus grand qu’un certain pourcentage de la largeur, cela risque de déformer le rendu. Ainsi, si on veut autoriser à tronquer au milieu d’un mot si ce dernier est plus grand que 20% de la largeur, on spécifiera wrapZone = 0.8 ;
  • endMarker : le marqueur de fin, “…” par défaut ;
  • onResize : active la gestion du tronquage lors du redimensionnement du noeud ;
  • displayOnOver : active l’affichage au survol du texte complet.

Plugin jQuery : “resize” event

Le plugin jQuery resize permet d’ajouter un évènement “resize” (de la même manière que “click” ou “mouseover”) aux objets jQuery (donc aux nœuds HTML). Vous pouvez le télécharger ici.

Il s’utilise de la même manière que les autres évènements :

$('monSelecteurCSS').resize(
	function(width, height, previousWidth, previousHeight) {
		// width: la largeur actuelle de l'élément
		// height: la hauteur actuelle de l'élément
		// previousWidth: la largeur de l'élément avant redimensionnement
		// previousHeight: la hauteur de l'élément avant redimensionnement
	});

Bientôt une application amusante sous la forme d’un autre plugin jQuery.