text-overflow CSS propriété

Définition de la CSS text-overflow.

La propriété CSS text-overflow permet de mettre entre autre des points de suspension ("...") quand le texte sort du bloc.

Exemple de syntaxe CSS text-overflow :

text-overflow : '!!!';
text-overflow : ellipsis;
text-overflow : ellipsis '.';

La propriété de feuille de style text-overflow CSS peut prendre la valeur de :

ellipsis : ajoute des points de suspension ("..." caractère unicode U+2026) et cache le texte qui sort du bloc.
clip : valeur par défaut, fonctionnement normal.
caratères : chaine de caractères entre guillemets droits doubles ou simple ("" ou '') et la chaine peut être vide. Caractères accentués pour le Css.
deux valeurs : possibilité de mettre deux chaines de caractères séparées par un espace pour spécifier le rognage droite et gauche.

Exemple de code text-overflow CSS

Conditions d'application de la CSS text-overflow.

La propriété CSS text-overflow est applicable sur l'ensemble des balises HTML ou XHTML. Cependant elle ne fonctionne que si white-space est égale à nowrap et que overflow est à hidden.

Héritage des valeurs Css de text-overflow.

Les balises filles HTML ou XHTML n'héritent pas de la propriété.

Problème d'interprétation de text-overflow en Css.

La propriété CSS text-overflow pose des problèmes d'interprétation car elle n'est pas reconnu par Firefox < 7, Safari < 1.3 et Opera < 11.

Règles de syntaxes CSS pour text-overflow.

Règles text-overflow

La propriété CSS text-overflow n'est appliquée que si la propriété Css overflow est à hidden.

Si on ne peut pas afficher les "..." de ellipsis ou la chaine de caractères, ils ne sont pas affichés.

Compatibilités navigateurs de la propriété text-overflow

Détails des versions de la CSS text-overflow: Propriété text-overflow css n'est pas compatible W3C; Propriété text-overflow est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS text-overflow: Propriété CSS text-overflow plus ou moins compatible à partir de Chrome 1; Propriété CSS text-overflow plus ou moins compatible à partir de Firefox 7; Propriété CSS text-overflow plus ou moins compatible à partir de Internet Explorer 6; Propriété CSS text-overflow plus ou moins compatible à partir de Opera 11.00; Propriété CSS text-overflow plus ou moins compatible à partir de Safari 1.3

Propriétés CSS préfixées de text-overflow

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes à la propriété text-overflow CSS :

-o-text-overflow

Il existe une propriété css similaire sur Opera 9 qui est -o-text-overflow.

Code CSS avec compatibilité Opera :

.identifant {  width : 150px;
  white-space : nowrap;
  overflow : hidden;
  -o-text-overflow : ellipsis;    /* Opera < 10 */
  text-overflow :    ellipsis;
}

Votre avis sur la définition text-overflow en CSS

Votez pour la définition CSS `text-overflow`

Votes: 4.2 / 5 - 18 votes
Cliquez sur une étoile pour voter.