Article mis à jour le : 05-05-2022
Comment tronquer le contenu d'un élément en HTMLTronquer le contenu d'un élément est assez simple. Bien sûr, vous pouvez tronquer son contenu côté serveur avant l'affichage, mais pourquoi se compliquer la vie quand HTML et CSS font le travail?
Il suffit de bien définir les paramètres de style de(s) élément(s) concerné(s): width, white-space, overflow, text-overflow (voir le paramètre de chacun plus bas)...
Maintenant, si votre conteneur a une largeur dynamique, vous devrez peut-être vous aider de jQuery. Dans l'exemple ci-dessous, je parcours des colonnes, et vérifier leur hauteur, pour savoir si cela "déborde", et le cas échéant, appliquer le style.
$("#[id^='colLibAxe']").each(function() {
if($(this).height() > 20) {
$(this).css('max-width', $(this).width());
$(this).css('white-space', 'nowrap');
$(this).css('overflow', 'hidden');
$(this).css('text-overflow', 'ellipsis');
}
});