[CSS] Note : text-overflow
mardi 22 avril 2014 à 07:34 Sebsauvage, le 20/04/2014 à 18:33
Une astuce intéressante quand un texte (titre ou autre) est amené à être tronqué.
(Permalink)
Ecirtam, le 20/04/2014 à 22:33
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
http://www.quirksmode.org/css/user-interface/textoverflow.html
http://css-tricks.com/almanac/properties/t/text-overflow/
http://caniuse.com/text-overflow
https://developer.mozilla.org/fr/docs/CSS/text-overflow
http://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-et-cesures-css.html
(Permalink)
Les Petits Liens Malfaisants, le 22/04/2014 à 07:34
Ceci :
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Appliqué à un titre, ligne de texte ou quelque chose d’autre, ajoutera des « … » à la fin du cadre, pour éviter que le texte soit masqué ou sorte du cadre.
La première ligne fait que la ligne de texte reste sur une ligne (quitte à dépasser horizontalement du cadre ; un peu comme dans les éléments "pre")
La seconde ligne fait que le texte qui dépasse est masqué, caché, invisible.
La troisième ligne ajoute un « … » quand du texte est masqué. Si le texte est plus petit que le cadre, alors il est complètement visible et les points de suspension ne sont pas visibles.
Les trois lignes ensembles donne quelque de chose d’intéressant quand du texte (un titre par exemple, ou un pseudo sur un blog) doit rester sur une seule ligne sans dépasser de son cadre, tout en indiquant au lecteur qu’il a été tronqué.
Au :hover, on pourrait supprimer le text-overflow pour afficher totalement texte.
C’est utilisable dès-à-présent et supporté dans tous les navigateurs depuis un moment (même IE6, c’est dire…).
Plein d’options sont disponibles (comme remplacer les points de suspensions par autre chose, comme rien du tout ou même un texte perso tel une flèche unicode).
http://www.quirksmode.org/css/user-interface/textoverflow.html
http://css-tricks.com/almanac/properties/t/text-overflow/
http://caniuse.com/text-overflow
https://developer.mozilla.org/fr/docs/CSS/text-overflow
http://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-et-cesures-css.html
(Permalink)
Une astuce intéressante quand un texte (titre ou autre) est amené à être tronqué.
(Permalink)
Ecirtam, le 20/04/2014 à 22:33
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
http://www.quirksmode.org/css/user-interface/textoverflow.html
http://css-tricks.com/almanac/properties/t/text-overflow/
http://caniuse.com/text-overflow
https://developer.mozilla.org/fr/docs/CSS/text-overflow
http://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-et-cesures-css.html
(Permalink)
Les Petits Liens Malfaisants, le 22/04/2014 à 07:34
Ceci :
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Appliqué à un titre, ligne de texte ou quelque chose d’autre, ajoutera des « … » à la fin du cadre, pour éviter que le texte soit masqué ou sorte du cadre.
La première ligne fait que la ligne de texte reste sur une ligne (quitte à dépasser horizontalement du cadre ; un peu comme dans les éléments "pre")
La seconde ligne fait que le texte qui dépasse est masqué, caché, invisible.
La troisième ligne ajoute un « … » quand du texte est masqué. Si le texte est plus petit que le cadre, alors il est complètement visible et les points de suspension ne sont pas visibles.
Les trois lignes ensembles donne quelque de chose d’intéressant quand du texte (un titre par exemple, ou un pseudo sur un blog) doit rester sur une seule ligne sans dépasser de son cadre, tout en indiquant au lecteur qu’il a été tronqué.
Au :hover, on pourrait supprimer le text-overflow pour afficher totalement texte.
C’est utilisable dès-à-présent et supporté dans tous les navigateurs depuis un moment (même IE6, c’est dire…).
Plein d’options sont disponibles (comme remplacer les points de suspensions par autre chose, comme rien du tout ou même un texte perso tel une flèche unicode).
http://www.quirksmode.org/css/user-interface/textoverflow.html
http://css-tricks.com/almanac/properties/t/text-overflow/
http://caniuse.com/text-overflow
https://developer.mozilla.org/fr/docs/CSS/text-overflow
http://www.alsacreations.com/tuto/lire/1038-gerer-debordement-contenu-et-cesures-css.html
(Permalink)