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


210

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?


2014: voir une réponse mise à jour stackoverflow.com/questions/802175/…
Adrien Be


Réponses:


187

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 .


C'est génial, merci de l'avoir signalé! Le texte non sélectionnable et les restrictions sur le contenu pouvant aller dans le div tronqué sont une honte, mais généralement cela ressemble à une bonne solution.
Sam Stokes

La seule vraie frustration que j'ai ressentie est que les espaces sont rendus en & nbsp ;, donc l'indentation n'est pas vraiment possible ... = /
Matchu

J'ai aussi rencontré ce même problème. Je ne peux pas croire que Firefox ne le supporte pas encore sous une forme ou une autre.
mcjabberz

cette approche fonctionne-t-elle pour n'importe qui sur les éléments OPTION des contrôles SELECT sur Webkit et IE8. Webkit ne semble rien faire pour moi et IE8 le clipse juste sans les points de suspension.
Rajat

La documentation de Microsoft pour text-overflown'indique pas la prise en charge des optionéléments (voir la section S'applique à à msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx ).
Simon Lieschke

45

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:


@chiragpatel essayez-le vous-même en éditant cette démo en direct jsbin.com/leyukama/1
Adrien Be

Pour toute personne intéressée, FF7 <représente 0,05% des utilisateurs de Firefox de nos jours
Tom Tom

19

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 /


C'est vraiment utile, merci! Il semble que tous les navigateurs, à l'exception de Firefox, prennent en charge la propriété CSS, donc avec ce plugin, les seules personnes pour lesquelles il ne fonctionnerait pas sont les utilisateurs de Firefox qui ont désactivé Javascript - et c'est quand même une dégradation gracieuse. Avez-vous une idée des implications en termes de performances?
Sam Stokes

Non, désolé ... Je n'ai pas utilisé le code dans la vraie vie, je viens de jouer avec la démo. Il serait facile de prendre la démo et de la copier-coller cent fois dans la même page.
RichieHindle

2
JavaScript truncate () (que ce soit une chaîne de points pour jQuery ou Prototype ou autre) n'est qu'une solution à mi-chemin, car ils ne prennent pas en compte la largeur des caractères. Ainsi, si vous souhaitez tronquer du texte en raison d'un espace limité prédéfini, ces fonctions ne fonctionnent de manière fiable que lorsque vous utilisez des polices à espacement fixe. Toute solution sérieuse devrait fonctionner sur des glyphes, pas sur le nombre de caractères.
Matthias

@Matthias: Peut-être que le code a été mis à jour depuis que vous l'avez testé, mais je viens de regarder la démo et cela fonctionne parfaitement avec une police à largeur variable.
RichieHindle

7

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


6

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


Le problème avec le pseudo-code est que "..." est toujours coupé ou masqué si le texte déborde. J'espérais que si le texte débordait, cela garantirait que "..." soit affiché. De toute évidence, ce n'est pas le cas :(
Antony

@Antony Il suffit de positionner le pseudo-élément: position: absolute; right: 0;(et n'oubliez pas position: relativele vrai élément pour qu'il fonctionne). Il se chevauchera cependant avec le texte, vous pouvez donc également ajouter une couleur d'arrière-plan.
dernier enfant
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.