Définition de la css text-overflow


Propriété css : text-overflow

Détails des versions feuilles de style css text-overflow
css3
Détails de compatiblilité de la feuilles de style css text-overflow pour les navigateurs
Internet Explorer 4+
Mozilla + et Firefox +
Safari 1 +
Chrome +
Netscape 6+


Définition de text-overflow

La propriété de feuille de style css text-overflow permet de spécifier mettre des "..." quand le texte sort du bloc.
Exemple de code :
.identifiant{
  text-overflow : ellipsis;
}
La propriété de feuille de style text-overflow css peut prendre la valeur de :
- ellipsis, ajoute "..." et cache le texte qui sort du bloc.
- clip, valeur par défaut, fonctionnement normal.



La propriété de feuille de style css text-overflow est applicable sur l'ensemble des balises HTML ou XHTML. Cependant elle ne fonctionne que si white-space est égale à <nowrap[/b] et que overflow est à <hidden[/b].


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


La propriété de feuille de style css text-decoration pose des problèmes d'interprétation car elle n'est pas reconnu par Firefox < 7, Safari < 1.3 et Opera < 10.


Exemples et astuces css

La propriété css text-overflow sous Opéra version 9+

Il existe une propriété css similaire sur Opera 9 qui est -o-text-overflow.
Code CSS :
Exemple de code :
.identifant {  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  -o-text-overflow: ellipsis; /* Opera < 10 */
  text-overflow: ellipsis;
}

BUG INTERNAUTE

Explication

Vous trouverez ci-dessous divers bugs d'interprétation de la css text-overflow.
Ces bugs ont été transmis par les internautes du site.

J'ai vérifié certains bugs mais pour la plupart, ils sont soit sur MAC soit sur un navigateur que je ne possède pas.
Ceux que j'ai pu visualiser sont notés
Bug vérifié : oui.

VOTRE AVIS

Notez cette page

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5
Avis sur la page http://www.zonecss.fr/style_css/feuille_css_text_overflow.html Votes: 4.5 / 5 - 12 votes
Cliquez sur une étoile pour voter.



Reporter un bug ou problème d'interprétationavec la propriété text-overflow