Comment afficher le CSS au-delà des ellipses

Dans la conception Web, nous rencontrons souvent des situations où le contenu du texte est trop long. À l'heure actuelle, le contenu du texte dépassant une certaine longueur doit être omis et affiché pour éviter que la disposition de l'interface ne soit étirée et n'affecte l'expérience utilisateur. CSS fournit un affichage pratique au-delà de l'attribut points de suspension qui peut aider les développeurs à implémenter cette fonction.

En CSS, l'affichage au-delà des points de suspension est obtenu grâce au débordement de texte. Lorsqu'un morceau de texte dépasse la taille de son conteneur, vous pouvez définir la propriété text-overflow pour indiquer l'excès de texte avec des points de suspension (...). Habituellement, vous devez spécifier les trois attributs suivants :

1. attribut white-space : contrôle la manière dont l'espace blanc à l'intérieur de l'élément est géré. Vous pouvez définir la valeur sur nowrap, ce qui signifie que le texte est forcé à être affiché sans retour à la ligne. car les ellipses apparaissent généralement à la fin de la ligne.
2. Attribut overflow : contrôle la façon dont le contenu de l'élément est affiché lorsqu'il déborde de la zone d'élément. Vous pouvez définir la valeur sur masqué ou sur défilement, car ce n'est que lorsque le texte dans le conteneur dépasse la taille du conteneur que l'affichage doit être omis. .
3. Attribut text-overflow : indique comment le texte est affiché après avoir dépassé le conteneur. Vous pouvez définir la valeur sur des points de suspension, ce qui signifie utiliser des points de suspension (...).

Par exemple :

.container {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Ce code CSS définit une classe de conteneur .container Lorsque le contenu du texte dans le conteneur dépasse la taille du conteneur, il sera représenté par des points de suspension (...). Dans le même temps, comme l'attribut white-space est défini sur nowrap, le texte ne sera pas renvoyé à la ligne.

Il est à noter que l'affichage au-delà des points de suspension n'est efficace que sur certains éléments spécifiques, tels que les éléments de niveau bloc et les éléments en ligne tels que div, p, span, etc. Pour les éléments tels que les zones de saisie et les boutons, vous devez définir des attributs spécifiques pour obtenir des effets similaires.

En développement actuel, afin d'être compatible avec différents navigateurs, il est recommandé d'utiliser les deux méthodes suivantes en même temps pour obtenir un affichage au-delà des points de suspension :

1. Utilisez text-overflow:ellipsis -webkit-box-; orient: vertical; -webkit-line-clamp:n; implémenté en combinaison avec l'attribut étendu CSS du noyau WebKit -webkit-line-clamp, où n est le nombre de lignes spécifié. Par exemple :

.container {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

Ce code CSS limite le contenu du texte à deux lignes, et le contenu en excès sera représenté par des points de suspension (...). Il convient de noter que l'attribut -webkit-line-clamp n'est valable que pour les navigateurs dotés du noyau WebKit (tels que Chrome, Safari, etc.), et pour les autres navigateurs, d'autres attributs doivent être utilisés.

2. Utilisez le pseudo élément :before ou :after combiné avec l'attribut content pour y parvenir. Par exemple :

.container {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.container:after {
  content: "...";
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

Ce code CSS utilise le pseudo élément : after pour ajouter un élément avec une couleur de fond blanche, puis utilise l'attribut content avec le contenu "..." pour obtenir l'effet de points de suspension. Il convient de noter que afin de conserver la position relative du pseudo-élément et du conteneur, l'attribut position de la classe conteneur doit être défini sur relatif.

En bref, CSS au-delà de l'affichage des points de suspension est une technique de conception classique qui peut améliorer l'esthétique et l'expérience utilisateur de l'interface. Dans le développement réel, il est nécessaire de sélectionner la méthode appropriée en fonction de la situation spécifique et d'effectuer des tests de compatibilité pour garantir que l'effet obtenu est conforme aux attentes.

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!