Comment puis-je obtenir une troncature de texte CSS compatible avec plusieurs navigateurs avec des ellipses ?

Tronquer les chaînes longues avec CSS : une odyssée spécifique au navigateur

Bien que tronquer le texte côté serveur en fonction de la largeur logique puisse suffire, cela souvent entraîne des résultats sous-optimaux en raison des largeurs variables des caractères individuels. Idéalement, la troncature devrait se produire dans le navigateur, où la largeur physique du texte rendu peut être déterminée avec précision.

La propriété text-overflow: ellipsis d'Internet Explorer atteint précisément cet objectif, mais sa compatibilité entre navigateurs est limitée. Firefox ne prend pas en charge cette propriété, ce qui oblige les développeurs à rechercher des solutions alternatives.

L'approche multi-navigateurs de Justin Maxwell

Justin Maxwell propose une solution de contournement basée sur CSS qui prend en charge plusieurs navigateurs. troncature du navigateur. Cependant, il comporte l'avertissement d'empêcher 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');
}

ellipsis.xml Contents

<?xml version="1.0"?>
<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

Pour résoudre une limitation dans la gestion de cette technique par Firefox, le code suivant peut être utilisé pour mettre à jour le nœud content :

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

        pnode.replaceChild(newNode, node);
    }
}

Grâce à ces techniques, les développeurs peuvent tronquer efficacement les longues chaînes avec CSS, garantissant ainsi que le contenu dynamique s'intègre dans des mises en page à largeur fixe tout en conservant des repères visuels conviviaux tels que des ellipses pour indiquer la troncature.

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!