Dynamic-Mess.com


"The world is a dynamic mess of jiggling things..."

Tronquer automatiquement le contenu d'un colonne en HTML

Article posté le 14-06-2016 dans la catégorie HTML et CSS

Article mis à jour le : 05-05-2022

Comment tronquer le contenu d'un élément en HTML

Tronquer 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');
            }
        });

Cet article vous a plu? Découvrez d'autres articles :


comments powered by Disqus