Comment cacher trois points en CSS

Comment masquer trois points en CSS : 1. Dans le cas d'une seule ligne, le débordement de texte peut être affiché sous forme de trois points via l'attribut CSS "text-overflow: ellipsis;" 2. Dans le cas de plusieurs lignes , l'attribut "overflow" peut être utilisé : Hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;" peut être obtenu.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3, ordinateur DELL G3

Comment réaliser un masquage en trois points en CSS ?

Le débordement de texte CSS est masqué sous la forme de trois points...

(1)Une seule ligne

white-space: nowrap;//不换行
text-overflow: ellipsis;//将文本溢出显示为（…）
overflow: hidden;//溢出隐藏。

(2)Plusieurs lignes

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Remarque : L'attribut text-overflow spécifie comment le texte doit être affiché lorsqu'il déborde de l'élément le contenant. Après débordement, vous pouvez définir le texte à couper, à afficher des points de suspension (...) ou à afficher une chaîne personnalisée (non supportée par tous les navigateurs).

text-overflow doit être utilisé avec les deux attributs suivants :

white-space: nowrap;
overflow: hidden;

Syntax

text-overflow: clip|ellipsis|string|initial|inherit;

Value

clip pour couper le texte.

ellipse affiche des ellipses... pour représenter le texte coupé.

string Utilisez la chaîne donnée pour représenter le texte coupé.

initial est défini sur la valeur par défaut de la propriété.

inherit hérite de cette valeur d'attribut de l'élément parent.

Apprentissage recommandé : "Tutoriel vidéo CSS"

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!