Comment puis-je tronquer de longues chaînes avec CSS et afficher des points de suspension dans les navigateurs ?

Tronquer de longues chaînes avec CSS : une solution multi-navigateurs

Tronquer du texte dynamique pour l'adapter à des mises en page fixes peut être un défi. Aucune propriété CSS native ne fournit une prise en charge multi-navigateurs pour tronquer le texte et afficher des points de suspension. Cependant, des solutions de contournement créatives peuvent atteindre cette fonctionnalité.

Technique Ellipsis de Justin Maxwell

Justin Maxwell a développé une solution CSS qui fonctionne sur tous les navigateurs, mais elle présente une limitation : elle le fait. n'autorise pas la sélection de texte dans Firefox.

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

Le fichier ellipsis.xml contient un balisage XBL qui implémente le Fonctionnalité de points de suspension.

Mise à jour du contenu du nœud

Dans Firefox, la mise à jour du contenu d'un nœud à l'aide de innerHTML peut interrompre la fonctionnalité de points de suspension. Pour résoudre ce problème, utilisez le code suivant :

function replaceEllipsis(node, content) {
    node.innerHTML = content;
    // Check for the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
}

Remarque : Débordement de texte : les points de suspension sont désormais pris en charge nativement dans Firefox 7. Cette mise à jour est une amélioration bienvenue, mais le cross- La solution CSS du navigateur reste une référence utile pour les anciens navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!