web-dev-qa-db-fra.com

Tronquer des chaînes longues avec CSS: faisable encore?

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

J'ai tronqué côté serveur par largeur logique (c'est-à-dire un nombre de caractères aveuglément deviné), mais comme le 'w' est plus large que 'i' ceci a tendance à être sous-optimal et nécessite également que je repasse (et continue à 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é que IE possède une propriété text-overflow: Ellipsis qui fait exactement ce que je veux, mais j'ai besoin que cela soit multi-navigateur. Cette propriété semble être (un peu?) Standard mais n'est pas supportée par Firefox. J'ai trouvé diverssolutions de contournement basé sur overflow: hidden, mais ils ne présentent pas non plus d'ellipsis (je veux que l'utilisateur sache que le contenu a été tronqué), ou l'afficher tout le temps (même si le contenu n'a pas été tronqué).

Quelqu'un at-il un bon moyen d’adapter du texte dynamique dans une disposition fixe ou la troncature côté serveur par la largeur logique est-elle aussi bonne que celle que je vais obtenir pour le moment?

csstextlayoutcross-browsertruncate
209
Sam Stokes

Mise à jour: text-overflow: Ellipsis est maintenant supporté à partir de Firefox 7 (publié le 27 septembre 2011). Yay! Ma réponse originale suit comme un enregistrement historique.

Justin Maxwell a une solution CSS multi-navigateurs. Toutefois, il ne présente pas l’inconvénient de ne pas autoriser la sélection du texte dans Firefox. Découvrez son post invité sur le blog de Matt Snider pour 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 propriété innerHTML de 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 noeud

Pour mettre à jour le contenu d'un nœud d'une manière qui fonctionne dans Firefox, utilisez les éléments suivants:

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 .

187
Simon Lieschke

Mars 2014: tronquer les chaînes longues avec CSS: une nouvelle réponse axée sur la prise en charge du navigateur

Démo sur http://jsbin.com/leyukama/1/ (J'utilise jsbin car il prend en charge l'ancienne version de 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 de IE de 6 à 11 prennent déjà en charge la propriété CSS text-overflow.

Testé avec succès (sur Browserstack.com) sous 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 l'a souligné Simon Lieschke (dans une autre réponse), Firefox ne prend en charge que la propriété CSS à débordement de texte à partir de Firefox 7 (publiée le 27 septembre 2011).

J'ai vérifié deux fois 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 Mac OS seraient nécessaires.

Remarque: vous pouvez afficher une info-bulle sur le survol de la souris lorsqu’un Ellipsis est appliqué. Pour cela, vous pouvez utiliser javascript. Voir la question suivante: Détection d’ellipsis HTML avec dépassement de texte et HTML - puis-je afficher l’info-bulle UNIQUEMENT lorsque Ellipsis est activé

Ressources:

44
Adrien Be

Si une solution JavaScript vous convient, il existe un plug-in jQuery pour le faire en mode multi-navigateur - voir http://azgtech.wordpress.com/2009/07/26/text-overflow -Ellipsis-for-firefox-via-jquery /

19
RichieHindle

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

7
j.j.

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

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

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

Le seul inconvénient de la CSS ci-dessus est qu’elle ajouterait le "...", que le texte déborde ou non du conteneur. Néanmoins, si vous avez un groupe d'éléments et que vous ê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

6
Rajat

Pour référence, voici un lien vers le suivi "bug" débordement de texte: support de Ellipsis dans Firefox . On dirait que Firefox est le seul navigateur majeur qui ne prend pas en charge une solution CSS native.

1
Sam Stokes