Propriété text-overflow

La propriété text-overflow ajoute des points de suspension à la fin du texte tronqué pour indiquer que le texte ne tenait pas dans le bloc et a été tronqué.

Pour que la propriété fonctionne, le texte doit être tronqué via la propriété overflow ou la propriété overflow-x avec la valeur hidden, auto ou scroll. Si visible est défini (ce qui est la valeur par défaut) - text-overflow ne fonctionnera pas.

Syntaxe

sélecteur {
	text-overflow: ellipsis | clip;
}

Valeurs

Valeur	Description
`ellipsis`	Ajoute des points de suspension à la fin du texte tronqué.
`clip`	N'ajoute pas de points de suspension à la fin (c'est la valeur par défaut, nécessaire pour annuler l'action de la propriété si besoin).

Valeur par défaut : clip.

Exemple . Texte débordant

Dans cet exemple, un mot très long ne tiendra pas dans le conteneur et débordera de ses limites. Aucun troncature ne se produit :

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: visible;
	border: 1px solid red;
}

Exemple . Ajoutons la propriété overflow

Maintenant, tout ce qui dépasse les limites du conteneur sera simplement tronqué :

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	border: 1px solid red;
}

Exemple . Valeur ellipsis

Maintenant, en plus de la propriété overflow ajoutons également text-overflow avec la valeur ellipsis. Des points de suspension seront ajoutés à la fin du texte tronqué :

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Exemple . Avec barres de défilement

Si vous définissez overflow: auto et text-overflow: ellipsis, une barre de défilement apparaîtra, mais les points de suspension seront toujours ajoutés. Essayez de faire défiler la barre de défilement dans l'exemple :

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: auto;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Exemple . S'il n'y a pas de mots très longs

S'il n'y a pas de mots assez longs pour déborder du conteneur, alors aucune troncature n'aura lieu (rien ne dépasse). Regardez l'exemple suivant :

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Exemple . Texte sur une seule ligne

Cependant, il y a des situations où nous voulons que le texte soit tronqué s'il est trop long (le texte en général, et pas des mots individuels) et ne passe pas à la ligne suivante. Ceci est fait en ajoutant la propriété white-space avec la valeur nowrap, qui interdira le retour du texte à la ligne. Regardez l'exemple, maintenant le texte est tronqué :

<div id="elem">
	Lorem ipsum dolor sit amet adipiscing elit.
</div>

#elem {
	width: 200px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Exemple . Largeur en pourcentages

Si vous définissez la largeur du bloc en %, la troncature fonctionnera également correctement :

<div id="elem">
	Lorem ipsum dolor sit amet
	loooooooooooooooooooooooooooooooongword,
	consectetur loooooooooooooooooooooooooooooooongword
	adipiscing elit.
</div>

#elem {
	width: 80%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border: 1px solid red;
}

Voir aussi

les propriétés word-break et overflow-wrap,
qui permettent de passer les lettres d'un mot long à la ligne suivante
la propriété hyphens,
qui active la césure des mots par syllabes
la propriété overflow,
qui tronque les parties débordantes du bloc