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

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

Valeurs

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 :

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

css#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é :

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

css#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é :

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

css#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 :

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

css#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 :

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

css#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é :

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

css#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 :

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

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

Результат:

Voir aussi