Tronquer les longues chaînes de caractères avec CSS : déjà faisable ?

Question

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

J'ai tronqué côté serveur en logique (c'est-à-dire un nombre de caractères estimé à l'aveugle), mais comme un "w" est plus large qu'un "i", cette méthode tend à être sous-optimale et m'oblige également à réévaluer (et à modifier sans cesse) le nombre de caractères pour chaque largeur fixe. L'idéal serait que la troncature se fasse dans le navigateur, qui connaîtrait la valeur de physique largeur du texte rendu.

J'ai découvert qu'IE a un text-overflow: ellipsis qui fait exactement ce que je veux, mais il faut que cela soit compatible avec tous les navigateurs. Cette propriété semble être (un peu ?) standard mais n'est pas pris en charge par Firefox. J'ai trouvé divers solutions de contournement sur la base de overflow: hidden mais soit ils n'affichent pas d'ellipse (je veux que l'utilisateur sache que le contenu a été tronqué), soit ils l'affichent tout le temps (même si le contenu n'a pas été tronqué).

Quelqu'un connaît-il un bon moyen d'intégrer du texte dynamique dans une mise en page fixe, ou bien la troncature côté serveur en fonction de la largeur logique est-elle la seule solution possible pour le moment ?

Answer 1

Mise à jour : text-overflow: ellipsis est désormais pris en charge à partir de Firefox 7 (publié le 27 septembre 2011). Bravo ! Ma réponse originale suit en tant qu'enregistrement historique.

Justin Maxwell propose une solution CSS pour tous les navigateurs. Elle présente toutefois l'inconvénient de ne pas permettre la sélection du texte dans Firefox. Voir aussi son billet invité sur le blog de Matt Snider pour obtenir tous les 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 fonction innerHTML dans Firefox. Voir la fin de ce billet 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 des fichiers

<?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 des nœuds

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

Véase Le billet de Matt Snider pour une explication du fonctionnement de ce système. .

Answer 2

Mars 2014 : Tronquer les longues chaînes de caractères avec CSS : une nouvelle réponse axée sur la prise en charge par les navigateurs.

Démonstration sur http://jsbin.com/leyukama/1/ (J'utilise jsbin car il supporte les anciennes versions 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 : elle 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) sur le système d'exploitation Windows, 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 indiqué par Simon Lieschke (dans une autre réponse), Firefox ne prend en charge la propriété CSS text-overflow qu'à partir de Firefox 7 (publié le 27 septembre 2011).

J'ai vé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 les navigateurs web de Mac OS seraient nécessaires.

Remarque : vous pouvez souhaiter afficher une infobulle au passage de la souris lorsqu'une ellipse est appliquée, ce qui peut être fait via javascript, voir cette question : Détection des ellipses dans le cadre du dépassement de texte HTML et HTML - comment puis-je afficher l'infobulle UNIQUEMENT lorsque l'ellipse est activée ?

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/

Answer 3

Si une solution JavaScript ne vous pose pas de problème, il existe un plug-in jQuery qui permet d'effectuer cette opération dans tous les navigateurs. http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for-firefox-via-jquery/

Answer 4

OK, Firefox 7 implémenté text-overflow: ellipsis ainsi que text-overflow: "string" . La version finale est prévue pour le 2011-09-27.

Answer 5

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

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

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

Le seul inconvénient de la CSS ci-dessus est qu'elle ajoute le "..." indépendamment du fait que le texte surplombant le conteneur ou non. Néanmoins, si vous avez un groupe d'éléments et que vous êtes sûr que le contenu débordera, cette règle est plus simple.

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