Comment puis-je tronquer efficacement les longues chaînes avec CSS et gérer la compatibilité entre navigateurs ?

Tronquer de longues chaînes avec CSS : excellence atteinte

Tronquer du texte avec HTML et CSS peut être une énigme, en particulier lorsqu'il s'agit de sa présentation dans dispositions fixes. La troncature côté serveur basée sur la largeur logique a ses limites et nécessite souvent des ajustements continus pour garantir des résultats optimaux.

Cependant, l'avènement du débordement de texte CSS : points de suspension a révolutionné ce processus. Cette propriété, désormais prise en charge par les principaux navigateurs, coupe le texte qui déborde et ajoute des points de suspension pour indiquer la troncature.

Justin Maxwell a conçu une solution CSS multi-navigateurs qui exploite la propriété susmentionnée. Bien qu'il empêche la sélection de texte dans Firefox, il coupe efficacement le contenu et affiche les points de suspension comme vous le souhaitez.

Implémentation CSS :

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

Liaison XML pour la prise en charge de Firefox :

<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <binding>

Mise à jour du contenu du nœud dans Firefox :

La mise à jour du contenu des nœuds utilisant les points de suspension dans Firefox nécessite une approche différente :

function replaceEllipsis(node, content) {
    node.innerHTML = content;
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);
        pnode.replaceChild(newNode, node);
    }
}

Avec cette solution améliorée, tronquer le texte dynamique dans les mises en page fixes n'est plus une tâche ardue . Débordement de texte : les points de suspension ont ouvert la voie à une présentation de contenu rationalisée, éliminant le besoin d'estimations côté serveur et garantissant la compatibilité entre 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!