So verbergen Sie drei Punkte in CSS

So verbergen Sie drei Punkte in CSS: 1. Bei einer einzelnen Zeile kann der Textüberlauf durch das CSS-Attribut „text-overflow: ellipsis;“ als drei Punkte angezeigt werden. 2. Bei mehreren Zeilen , kann das Attribut „overflow“ verwendet werden: versteckt;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;“ kann erreicht werden.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3-Version, DELL G3-Computer

Wie erreicht man das Dreipunkt-Ausblenden in CSS?

CSS-Textüberlauf wird als drei Punkte ausgeblendet...

(1)Einzelne Zeile

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

(2)Mehrere Zeilen

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

Hinweis: Das text-overflow-Attribut gibt an, wie Text angezeigt werden soll, wenn er das Element überläuft es enthält. Nach dem Überlauf können Sie festlegen, dass der Text ausgeschnitten wird, Auslassungspunkte (...) oder eine benutzerdefinierte Zeichenfolge angezeigt werden (nicht von allen Browsern unterstützt).

text-overflow muss mit den folgenden zwei Attributen verwendet werden:

white-space: nowrap;
overflow: hidden;

Syntax

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

Wert

clip zum Ausschneiden von Text.

ellipsis zeigt Ellipsen an, um beschnittenen Text darzustellen.

string Verwenden Sie die angegebene Zeichenfolge, um den zugeschnittenen Text darzustellen.

initial wird auf den Standardwert der Eigenschaft gesetzt.

inherit erbt diesen Attributwert vom übergeordneten Element.

Empfohlenes Lernen: „CSS-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonSo verbergen Sie drei Punkte in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!