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;
Valeur par défaut. Le texte est simplement tronqué, sans indication particulière.
- text-overflow: ellipsis;
Le symbole trois points (
...
) est ajouté à la fin de la ligne. - text-overflow: '>';
Le ou les caractères indiqués sont ajoutés à la fin des lignes tronquées.
- text-overflow: fade(10px); ⚠
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
. -
Reportez-vous à la description générale de ces valeurs.
Simulateur.
text-overflow
:
Voir aussi...
Blocs de texte - Propriétés.
direction
: Sens d'écriture.hyphens
: Césure des mots.letter-spacing
: Espacement des lettres.line-height
: Définit la hauteur des lignes de texte.text-align
: Alignement du texte.text-align-last
: Alignement de la dernière ligne des paragraphes.text-emphasis-color
: Définit la couleur des caractères de mise en exergue.text-emphasis-position
: Position des caractères de mise en exergue.text-emphasis-style
: Style de mise en exergue.text-indent
: Définit le retrait de la première ligne des paragraphe (indentation).text-justify
: Méthode utilisée pour justifier le texte.unicode-bidi
: Gestion des possibilités d'écriture bidirectionnelle de Unicode.word-spacing
: Espacement des mots.writing-mode
: Sens et direction d'écriture (horizontale ou verticale).