Tronquer de longues ficelles avec CSS: faisable?

2014 Mars: tronquer les chaînes longues avec CSS: une nouvelle réponse avec un accent sur le soutien du navigateur

Démo sur http://jsbin.com/leyukama/1 / (j'utilise jsbin car il supporte 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 supportent déjà la propriété CSS text-overflow.

testé avec succès (sur Browserstack.com) sur Windows OS, pour les navigateurs web:

• IE6 à IE11
• Opéra 10.6, Opéra 11.1, Opéra 15.0, Opéra 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 (en une autre réponse), Firefox ne supporte la propriété CSS De text-overflow qu'à partir de Firefox 7 (publié 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 supporté).

D'autres tests sur les navigateurs Web Mac OS seraient nécessaires.

Note: Vous pouvez afficher une infobulle sur le curseur de la souris lorsqu'une ellipse est appliquée, cela peut être fait via javascript, voir ces questions: HTML text-overflow points de suspension "détection de 151970920" et HTML - comment puis-je afficher les info-bulle UNIQUEMENT lorsque le bouton de sélection est activé

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 y a un plug-in jQuery pour le faire de manière transversale-voir http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for-firefox-via-jquery/

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

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 du CSS ci-dessus est qu'il ajouterait le"..."que le texte déborde le conteneur ou non. Néanmoins, si vous avez un cas où vous avez un tas d'éléments et que vous êtes sûr que le contenu de débordement, ce serait un simple ensemble de règles.

mes deux cents. Chapeau bas à la technique originale de Justin Maxwell

Pour référence, voici un lien vers le "bug" de suivi text-overflow: ellipsis soutien dans Firefox . On dirait que Firefox est le seul navigateur majeur qui ne supporte pas une solution natif CSS.

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}