Comment obtenir deux lignes au-delà des ellipses en CSS

En CSS, vous devez parfois faire en sorte qu'un élément affiche deux lignes de texte ou plus, mais vous ne souhaitez pas que tout le texte soit affiché. Dans ce cas, vous pouvez utiliser la méthode "deux lignes au-delà des points de suspension".

En CSS, vous pouvez utiliser les propriétés text-overflow et white-space pour obtenir cet effet. text-overflow est utilisé pour définir le style lorsque le texte dépasse le conteneur, tandis que l'espace blanc est utilisé pour contrôler la façon dont le texte est affiché sans retour à la ligne.

Tout d'abord, placez le texte qui doit être défini sur deux lignes dans un conteneur de largeur fixe, comme dans l'exemple suivant :

<div class="container">这是需要超过两行的文本内容</div>

Ensuite, ajoutez le style suivant en CSS :

.container {
  width: 200px;       /* 容器宽度 */
  height: 48px;       /* 容器高度，即两行高度 */
  overflow: hidden;   /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 超出内容用省略号代替 */
  white-space: nowrap; /* 不换行 */
}

De cette façon, vous pouvez obtenir du texte contenu de plus de deux lignes. La forme "..." est omise, tout en conservant la hauteur des deux lignes d'origine.

Il convient de noter que le débordement de texte et l'espace blanc ne fonctionnent que sur le texte après avoir été intercepté, donc si vous souhaitez définir le style du texte dans le conteneur, vous devez utiliser d'autres propriétés associées en même temps, tels que la taille de la police et la hauteur de la ligne, etc.

En plus de deux lignes dépassant les points de suspension, CSS fournit également une série de textes similaires dépassant les méthodes de troncature, telles que les points de suspension sur une seule ligne, les points de suspension sur plusieurs lignes, etc.

En général, la méthode CSS au-delà des ellipses peut nous aider à rendre le contenu du texte plus beau et plus facile à lire sans prendre trop de place.

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!