Cinq façons de masquer le débordement CSS - test disponible

Le débordement de texte et les points de suspension multilignes en CSS sont des problèmes souvent rencontrés dans la conception de mise en page. Cet article présentera l'implémentation du débordement de texte CSS et des points de suspension multilignes.

Table des matières

1. Débordement de texte

1.1. Omission de débordement de texte sur une seule ligne :

1.2. Omission de débordement de texte multiligne :

2. Omission de plusieurs lignes

2.1, utiliser du texte brut pour obtenir

2.2. Implémentation à l'aide de pseudo-éléments

Résumer

---

1. Débordement de texte

Un débordement de texte se produit lorsque le contenu du texte dans un conteneur dépasse la largeur ou la hauteur du conteneur. Voici plusieurs façons d’obtenir un débordement de texte en CSS.

1.1. Omission de débordement de texte sur une seule ligne :

L'omission de débordement de texte sur une seule ligne est généralement utilisée pour l'affichage de texte tel que les titres, ce qui peut être obtenu en définissant les attributs d'espace blanc et de débordement de texte.

Attribut white-space : utilisé pour définir comment gérer les espaces dans l'élément, la valeur par défaut est normale, c'est-à-dire que les espaces et les sauts de ligne redondants seront automatiquement ignorés. Lorsqu'il est défini sur nowrap, le texte ne sera pas renvoyé à la ligne.

Attribut text-overflow : utilisé pour contrôler le mode d'affichage du texte de débordement, la valeur par défaut est clip, qui consiste à couper la partie de débordement. Lorsqu'il est défini sur points de suspension, des points de suspension s'affichent.

Exemple de code :

<style>
  .overflow {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>
<div class="overflow">这是一段需要溢出省略的文本内容</div>
 

1.2. Omission de débordement de texte multiligne :

L'omission du débordement de texte sur plusieurs lignes peut également être obtenue en définissant la propriété text-overflow. Cependant, l'attribut text-overflow ne fonctionne pas pour le texte multiligne et doit être implémenté en combinaison avec d'autres attributs.

Attribut -webkit-line-clamp : Utilisé pour limiter le nombre de lignes affichées.

propriété d'affichage : utilisée pour définir la propriété d'affichage du conteneur sur -webkit-box, ce qui en fait une boîte de niveau bloc.

Attribut -webkit-box-orient : utilisé pour définir la direction de disposition des boîtes au niveau du bloc pour qu'elle soit verticale.

Exemple de code :

<style>
  .overflow {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>
<div class="overflow">这是一段需要溢出省略的多行文本内容，如果文本过长会出现省略号</div>
 

2. Omission de plusieurs lignes

Les points de suspension multilignes sont principalement utilisés pour omettre le texte qui dépasse la hauteur du conteneur dans un conteneur à hauteur fixe. De même, pour l'omission de texte sur une seule ligne, vous pouvez utiliser la propriété text-overflow, mais pour l'omission sur plusieurs lignes, vous devez combiner d'autres propriétés pour y parvenir.

2.1, utiliser du texte brut pour obtenir

L'omission du texte sur plusieurs lignes est obtenue en ajustant la hauteur et la hauteur de la ligne.

Exemple de code :

<style>
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 25px;
    height: 50px;
  }
</style>
<div class="ellipsis">这是一段需要省略的多行文本内容，如果文本过长会出现省略号</div>
 

2.2. Implémentation à l'aide de pseudo-éléments

Les points de suspension du texte multiligne sont obtenus en ajoutant des points de suspension après le texte via un pseudo-élément.

Exemple de code :

<style>
  .ellipsis::before {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 10px;
    background: white;
  }
  .ellipsis {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 25px;
    height: 50px;
  }
</style>
<div class="ellipsis">这是一段需要省略的多行文本内容，如果文本过长会出现省略号</div>
 

Résumer

Ce qui précède est la méthode CSS pour réaliser le débordement de texte et l'omission de plusieurs lignes.Pour différents besoins, différentes méthodes de mise en œuvre peuvent être sélectionnées en fonction de la situation réelle. Dans le développement réel, nous devons utiliser le préfixe CSS correspondant en fonction de la compatibilité des différents navigateurs et faire attention à la compatibilité entre les différentes propriétés.