Comment afficher les parties excédentaires de plusieurs lignes sous forme d'ellipses en CSS

Lorsque plusieurs lignes de texte apparaissent en CSS, il arrive souvent que la partie excédentaire ne puisse pas être affichée correctement. À l’heure actuelle, nous pouvons utiliser des ellipses pour résoudre ce problème.

La méthode de fonctionnement spécifique est la suivante :

1. Tout d'abord, vous devez définir un conteneur avec une largeur limitée pour le texte, par exemple :

<div class="text-container">
  这是一段需要进行多行省略号处理的文本内容
</div>

2. Ensuite, définissez le style du conteneur de texte en CSS, y compris la largeur , taille de police, hauteur de ligne et autres attributs :

.text-container {
  width: 300px;
  font-size: 16px;
  line-height: 1.5;
}

3. Ensuite, nous pouvons obtenir l'effet de points de suspension grâce à la propriété text-overflow en CSS. Cette propriété a trois valeurs : clip, points de suspension et chaîne. Parmi eux, clip signifie ne pas afficher de points de suspension et string signifie afficher la chaîne spécifiée sous forme de points de suspension. Lorsque plusieurs lignes de texte sont omises, des points de suspension sont généralement utilisés pour obtenir la valeur. Dans le même temps, nous devons également définir l'espace blanc sur normal ou normal-wrap pour permettre au texte de s'enrouler automatiquement après avoir dépassé la largeur du conteneur.

.text-container {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;  /* 控制行数 */
  -webkit-box-orient: vertical;
}

4. Dans le code ci-dessus, nous utilisons également les propriétés -webkit-line-clamp et -webkit-box-orient pour contrôler le nombre et la direction des lignes de texte. Parmi eux, l'attribut -webkit-line-clamp est utilisé pour contrôler le nombre de lignes de texte affichées. Dans cet exemple, je l'ai configuré pour afficher jusqu'à 3 lignes. L'attribut -webkit-box-orient est utilisé pour définir la disposition des éléments enfants d'une boîte flexible. Ici, je l'ai défini sur une disposition verticale.

Cela complète l'effet des ellipses multilignes CSS. En général, la chose importante à noter est de définir la largeur du conteneur de texte et de définir le nombre approprié de lignes et le style des ellipses. Dans le même temps, utilisez l'attribut text-overflow pour contrôler le style des points de suspension de la partie excédentaire du texte afin d'obtenir de meilleurs résultats.

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!