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

https://stackoverflow.com/questions/802175

03-07-2019
|

Question

Existe-t-il un bon moyen de tronquer du texte avec HTML brut et CSS, afin que le contenu dynamique puisse tenir dans une présentation à largeur et hauteur fixes?

J'ai tronqué la largeur logique côté serveur (c.-à-d. un nombre de caractères deviné aveuglément), mais comme le "w" est plus large que le "i", il a tendance à être sous-optimal. , et me demande également de deviner (et de continuer à 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 constaté qu'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 prise en charge par Firefox. J'ai trouvé divers solutions de contournement en fonction du dépassement de : caché , mais soit ils n'ont pas de points de suspension (je veux que l'utilisateur sache que le contenu a été tronqué), soit ils l'ont 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?

La solution

Mise à jour: débordement de texte: points de suspension est désormais pris en charge à partir de Firefox 7 (publié le 27 septembre 2011). Yay! Ma réponse originale est donnée à titre 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. Consultez son message d'invité sur le blog de Matt Snider pour obtenir tous les détails sur comment 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 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');
}

points de suspension ellipsis.xml

<?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 l'article de Matt Snider pour une explication de son fonctionnement. .

Autres conseils

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 parce que 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'Internet Explorer 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é ce comportement deux fois sur Firefox 3.0 & amp; 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 lorsque vous passez la souris sur le survol de la souris. Pour ce faire, vous pouvez le faire en javascript. Voir les questions suivantes: Détection d'ellipses de dépassement de texte HTML et HTML - comment afficher une info-bulle UNIQUEMENT lorsque les points de suspension sont activés

Ressources:

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 /

OK, Firefox 7 a implémenté débordement de texte: points de suspension ainsi que débordement de texte: "chaîne" . 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 de la CSS ci-dessus est qu’elle ajouterait le " ... " indépendamment du fait que le texte dépasse 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, voici un ensemble de règles plus simple.

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

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

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow