Comment obtenir l'effet de points de suspension au-delà du masquage en CSS

Dans la mise en page d'une page Web, nous devons souvent limiter la largeur ou la hauteur de certains éléments. Lorsque la largeur ou la hauteur dépasse la limite, la manière d'afficher le contenu du texte est une chose très importante. Habituellement, nous pouvons utiliser l'attribut overflow:hidden en CSS pour limiter l'affichage du contenu des éléments. Cependant, lorsque le contenu est masqué, certaines informations importantes peuvent être omises, ce qui n'est pas convivial pour les utilisateurs. Par conséquent, nous devons utiliser l’option ellipses CSS pour informer les utilisateurs que le contenu du texte a été omis.

Généralement, lorsque le contenu du texte dépasse la limite, la méthode de traitement par défaut du navigateur consiste à tronquer et masquer le texte en excès. Cependant, nous devons parfois afficher des points de suspension pour indiquer à l'utilisateur qu'un contenu a été omis. À l'heure actuelle, nous pouvons y parvenir grâce à la propriété text-overflow en CSS.

La propriété CSS text-overflow est utilisée pour spécifier comment afficher les points de suspension lorsque le texte déborde de l'élément conteneur. L'attribut text-overflow a trois valeurs : clip, points de suspension et chaîne.

1. la valeur du clip signifie que lorsque le texte déborde, le contenu au-delà du texte est masqué et les points de suspension ne sont pas affichés.
2. La valeur des points de suspension signifie que lorsque le texte déborde, le contenu au-delà du texte est masqué et des points de suspension sont affichés à la fin du texte.
3. La valeur de chaîne signifie que lorsque le texte déborde, masquez le contenu au-delà du texte et affichez la chaîne donnée à la fin du texte. Par exemple, vous pouvez définir la valeur sur "...", puis trois points seront affichés à la fin du texte, indiquant qu'un contenu a été omis.

L'attribut text-overflow doit être utilisé avec les deux attributs overflow:hidden et white-space:nowrap. Parmi eux, white-space:nowrap indique que le texte ne peut pas être renvoyé à la ligne et ne peut être affiché que sur une seule ligne. overflow:hidden indique que lorsque le texte déborde, la partie excédentaire sera masquée.

Ce qui suit est un exemple. Nous définissons la largeur d'un élément div à 100 px, la hauteur à 50 px et le contenu du texte est un texte très long. Lorsque le texte déborde, nous utilisons la propriété text-overflow:ellipsis en CSS pour afficher les points de suspension :

<div class="text-overflow">这是一个超长的文本，它将会在这个div中被限制宽度和高度。</div>

.text-overflow {
  width: 100px;
  height: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Dans le code ci-dessus, nous limitons la largeur et la hauteur de l'élément, et la partie au-delà du texte sera masquée. Dans le même temps, nous configurons le texte pour qu'il ne soit pas renvoyé à la ligne et puisse être affiché sur une seule ligne. Enfin, nous utilisons l'attribut text-overflow:ellipsis pour afficher les points de suspension.

Résumé

Les attributs Beyond-hide et ellipses de CSS sont des techniques couramment utilisées dans la mise en page des pages Web. Ils peuvent limiter efficacement la largeur ou la hauteur des éléments et afficher des points de suspension lorsque le texte déborde, afin que les utilisateurs puissent clairement savoir que certaines informations. a été omis. L'attribut text-overflow doit être utilisé avec les attributs overflow:hidden et white-space:nowrap pour implémenter correctement l'effet d'affichage des points de suspension.

J'espère que cet article vous sera utile, merci d'avoir lu !

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!