Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété text-overflow

Description.

La propriété text-overflow définit comment sera indiqué le débordement du texte. Lorsque le contenu de l'élément déborde de la largeur de l'élément, cette propriété permet de choisir ce qui sera affiché pour indiquer qu'une partie du texte n'est pas visible.

text-overflow ne concerne que les débordements de texte dans le sens horizontal. Autrement dit pour les éléments dont la propriété white-space a la valeur nowrap sinon il n'y a jamais de débordement : le texte revient à la ligne.

Par ailleurs, cette propriété n'a d'effet que si on a overflow:hidden; .

Syntaxes pour text-overflow.

  • text-overflow: clip;
    Exemple avec text-overflow: clip

    Valeur par défaut. Le texte est simplement tronqué, sans indication particulière.

  • text-overflow: ellipsis;
    Exemple avec text-overflow: ellipsis

    Le symbole trois points ( ... ) est ajouté à la fin de la ligne.

  • text-overflow: '>';
    Exemple avec text-overflow et un caractère

    Le ou les caractères indiqués sont ajoutés à la fin des lignes tronquées.

  • text-overflow: fade(10px); ⚠
    Exemple avec text-overflow: fade()

    Le texte devient de plus en plus transparent pour finalement disparaître à la bordure du bloc. Cette syntaxe est peu reconnue par les navigateurs.

    La valeur indiquée entre parenthèses doit être suivie d'une unité de dimension (voir les unités de dimensions en CSS). S'il s'agit d'un pourcentage, il est calculé par rapport à la largeur du bloc.

  • text-overflow: initial;

    La valeur initiale est clip.

  • text-overflow: unset; text-overflow: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

text-overflow :
Donec vitae fringilla ligula. Donec pharetra semper metus quis porttitor. In sit amet aliquam metus. Phasellus fermentum lectus sed arcu gravida, nec condimentum leo hendrerit.

Voir aussi...

Blocs de texte - Propriétés.