Tronquer de longues chaînes avec CSS: encore possible?

Existe-t-il un bon moyen de tronquer le texte avec du HTML et du CSS simples, afin que le contenu dynamique puisse tenir dans une mise en page à largeur et hauteur fixes?

J'ai tronqué côté serveur par la largeur logique (c'est-à-dire un nombre de caractères deviné aveuglément), mais comme un «w» est plus large qu'un «i», cela a tendance à être sous-optimal et me demande également de deviner ( et continuez à peaufiner) le nombre de caractères pour chaque largeur fixe. Idéalement, la troncature se produirait dans le navigateur, qui connaît la largeur physique du texte rendu.

J'ai trouvé qu'IE a une text-overflow: ellipsispropriété qui fait exactement ce que je veux, mais j'ai besoin que ce soit multi-navigateur. Cette propriété semble être (quelque peu?) Standard mais n'est pas prise en charge par Firefox. J'ai trouvé diverses solutions de contournement basées sur overflow: hidden, mais elles n'affiche pas de points de suspension (je veux que l'utilisateur sache que le contenu a été tronqué), ou l'affiche tout le temps (même si le contenu n'a pas été tronqué).

Quelqu'un a-t-il un bon moyen d'ajuster le texte dynamique dans une mise en page fixe, ou la troncature côté serveur par largeur logique est-elle aussi bonne que je vais l'obtenir pour l'instant?

Mise à jour: text-overflow: ellipsisest désormais prise en charge à partir de Firefox 7 (sortie le 27 septembre 2011). Yay! Ma réponse originale suit comme un record historique.

Justin Maxwell a une solution CSS multi-navigateur. Il présente cependant l'inconvénient de ne pas permettre la sélection du texte dans Firefox. Consultez son article invité sur le blog de Matt Snider pour plus de détails sur la façon dont cela fonctionne.

Notez que cette technique empêche également la mise à jour du contenu du nœud en JavaScript à l'aide de la innerHTMLpropriété dans Firefox. Voir la fin de ce post pour une solution de contournement.

CSS

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

ellipsis.xml contenu du fichier

<?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 id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

Mise à jour du contenu du nœud

Pour mettre à jour le contenu d'un nœud d'une manière qui fonctionne dans Firefox, utilisez ce qui suit:

var replaceEllipsis(node, content) {
    node.innerHTML = content;
    // use your favorite framework to detect the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
};

Voir le post de Matt Snider pour une explication de la façon dont cela fonctionne .

Mars 2014: Tronquer les longues chaînes avec CSS: une nouvelle réponse en mettant l'accent sur le support du navigateur

Démo sur http://jsbin.com/leyukama/1/ (j'utilise jsbin car il supporte l'ancienne version d'IE).

<style type="text/css">
    span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: ellipsis;  /** Opera 9 & 10 **/
        width: 370px; /* note that this width will have to be smaller to see the effect */
    }
</style>

<span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used</span>

La propriété CSS -ms-text-overflow n'est pas nécessaire: c'est un synonyme de la propriété CSS text-overflow, mais les versions d'IE de 6 à 11 prennent déjà en charge la propriété CSS text-overflow.

Testé avec succès (sur Browserstack.com) sous Windows OS, pour les navigateurs Web:

• IE6 à IE11
• Opera 10.6, Opera 11.1, Opera 15.0, Opera 20.0
• Chrome 14, Chrome 20, Chrome 25
• Safari 4.0, Safari 5.0, Safari 5.1
• Firefox 7.0, Firefox 15

Firefox: comme l'a souligné Simon Lieschke (dans une autre réponse), Firefox ne prend en charge la propriété CSS de débordement de texte qu'à partir de Firefox 7 (publiée le 27 septembre 2011).

J'ai revérifié ce comportement sur Firefox 3.0 et Firefox 6.0 (le débordement de texte n'est pas pris en charge).

Des tests supplémentaires sur un navigateur Web Mac OS seraient nécessaires.

Remarque: vous souhaiterez peut-être afficher une info-bulle au survol de la souris lorsqu'une ellipse est appliquée, cela peut être fait via javascript, voir les questions suivantes: détection des ellipses de débordement de texte HTML et HTML - comment puis-je afficher l'info-bulle UNIQUEMENT lorsque les ellipses sont activées

Ressources:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compatibility
• http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
• https://stackoverflow.com/a/1101702/759452
• http://www.browsersupport.net/CSS/text-overflow
• http://caniuse.com/text-overflow
• http://msdn.microsoft.com/en-us/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

Si vous êtes d'accord avec une solution JavaScript, il existe un plug-in jQuery pour le faire de manière multi-navigateur - voir http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for -firefox-via-jquery /

OK, Firefox 7 mis en œuvre text-overflow: ellipsisainsi que text-overflow: "string". La version finale est prévue pour le 2011-09-27.

Une autre solution au problème pourrait être l'ensemble de règles CSS suivant:

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

Le seul inconvénient du CSS ci-dessus est qu'il ajouterait le "...", que le texte déborde ou non du conteneur. Pourtant, si vous avez un cas où vous avez un tas d'éléments et êtes sûr que le contenu va déborder, celui-ci serait un ensemble de règles plus simple.

Mes deux centimes. Chapeau à la technique originale de Justin Maxwell