Pourquoi mon CSS `text-overflow: ellipsis;` ne fonctionne-t-il pas ?

Débordement de texte CSS : points de suspension ; Ne fonctionne pas ?

La propriété CSS "text-overflow: ellipsis;" tronque une chaîne lorsque sa longueur dépasse l'espace disponible, en remplaçant la partie tronquée par un symbole de points de suspension (...). Cependant, cela peut ne pas toujours fonctionner comme prévu.

Conditions de fonctionnalité :

Pour « débordement de texte : points de suspension ; » pour fonctionner correctement, les conditions suivantes doivent être remplies :

• Largeur limitée en pixels : La largeur de l'élément doit être spécifiée en pixels (px). La largeur exprimée en pourcentage (%) n'activera pas l'effet de points de suspension.
• Débordement contraint et espace blanc : L'élément doit avoir à la fois "overflow : caché" et "espace blanc : nowrap " défini.

Résolution du problème :

Dans le code, le problème se pose car la largeur de l’élément « a » n’est pas contrainte. Bien qu'une largeur soit définie, l'élément est défini par défaut sur "display: inline", ce qui lui permet de s'étendre au-delà de sa largeur spécifiée.

Pour résoudre ce problème, vous devez contraindre la largeur de l'élément à l'aide de l'une des options suivantes méthodes :

• Définir l'affichage : Modifiez la propriété d'affichage en "display: inline-block" ou "display: block" pour empêcher l'élément de s'étendre au-delà de sa largeur spécifiée.
• Contraindre l'élément conteneur : Spécifiez "display: block" et une largeur fixe ou largeur maximale pour l'un des éléments conteneurs de l'élément "a".
• Flotter l'élément : Appliquez "float: left" ou "float: right" à l'élément "a" pour limiter son width.

La solution recommandée consiste à définir la propriété d'affichage sur « display: inline-block », car elle minimise l'impact potentiel sur la mise en page actuelle.

Révisé Extrait :

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!