Comment afficher des points de suspension dans un span avec un débordement caché en CSS ?

Affichage des points de suspension dans une étendue avec débordement caché

En CSS, la propriété overflow détermine ce qui se passe lorsque le contenu d'un élément dépasse ses limites. Dans le scénario donné, le CSS d'un élément span masque tout contenu débordant. Cela entraîne la coupure du contenu, comme observé dans l'extrait de code.

Pour résoudre ce problème, vous pouvez utiliser la propriété text-overflow, qui contrôle le comportement du texte en débordement. En définissant text-overflow sur points de suspension, vous pouvez spécifier que tout texte débordant doit être remplacé par des points de suspension (...). Cela vous permettra d'afficher une partie du texte dans l'intervalle tout en indiquant qu'il y en a plus.

Voici comment modifier votre CSS pour obtenir le résultat souhaité :

<code class="css">span {
  display: inline-block;
  width: 180px;
  overflow: hidden !important;
  text-overflow: ellipsis;
}</code>

Ceci Le CSS mis à jour affichera le texte dans l'élément span, jusqu'à 180 pixels de largeur. Tout texte restant sera remplacé par des points de suspension.

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!