Accueil    CSS    Propriété text-overflow
 



style css text-overflow  Style CSS text-overflow

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété text-overflow permet de dicter le comportement à appliquer lorsqu'un texte atteint et dépasse la limite de son conteneur. Il est alors possible d'appliquer la valeur "ellipsis" qui stoppe le rendu du texte et affiche trois points de suspension juste avant d'atteindre la limite du conteneur.

Les styles css white-space, word-break et word-wrap peuvent être employées pour déterminer comment s'effectuent les retours à la ligne d'un texte au sein d'un élément.



Propriétés pour le style text-overflow :




Propriété Définition Valeurs CSS
text-overflow Détermine le mode d'affichage lorsque le texte dépasse la limite de son conteneur clip
ellipsis
valeur
CSS 3


Exemple d'utilisation du style css text-overflow :




Exemples d'utilisation de text-overflow sur des éléments de type block et inline, sans retour à la ligne autorisé (style white-space:nowrap) :

<div style="width:450px; border:solid 1px black; padding:5px; white-space:nowrap;
   overflow:hidden; text-overflow:clip;">
   exemple de texte au sein d'un conteneur block avec le style text-overflow:clip
</div>

<div style="width:450px; border:solid 1px black; padding:5px; white-space:nowrap;
   overflow:hidden; text-overflow:ellipsis;">
   exemple de texte au sein d'un conteneur block avec le style text-overflow:ellipsis
</div>


<label style="width:450px; border:solid 1px black; padding:5px; white-space:nowrap;
   overflow:hidden; text-overflow:ellipsis;">
   exemple de texte au sein d'un conteneur inline avec le style text-overflow:ellipsis
</label>


Exemples d'utilisation de text-overflow sur des éléments de type block et inline, sans retour à la ligne autorisé (style white-space:nowrap) :

exemple de texte au sein d'un conteneur block avec le style text-overflow:clip

exemple de texte au sein d'un conteneur block avec le style text-overflow:ellipsis