So verwenden Sie CSS, um nur eine Zeile anzuzeigen, wenn mehr als drei Zeilen überschritten werden

So verwenden Sie CSS, um nur eine Zeile anzuzeigen, wenn mehr als drei Zeilen vorhanden sind: 1. Öffnen Sie die entsprechende HTML-Datei. 2. Setzen Sie das CSS-Attribut für die Textbeschriftung auf „.text_singlerow {display:block;white-space:“ nowrap;overflow:hidden; text-overflow:ellipsis;}“ kann verwendet werden, um eine einzelne Zeile anzuzeigen.

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

Wie zeige ich nur eine Zeile in CSS an, wenn mehr als drei Zeilen überschritten werden?

Steuern Sie die Anzahl der Zeilen, die in mehrzeiligem Text in CSS angezeigt werden.

Manchmal ist es erforderlich, nur eine Zeile, zwei Zeilen oder drei Zeilen mehrzeiligen Textinhalts anzuzeigen Um die relevanten Attribute in CSS festzulegen, lautet der Code wie folgt:

// 多行显示
.text_morerow {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; // 显示2行
    -webkit-box-orient: vertical;
    word-break: break-all; 
}
 
 
// 单行显示
.text_singlerow {
    display:block; /*这里设置inline-block或者block；根据使用情况来定（行内元素需要加这个，块级元素和行内块级可以不用）*/
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

Es ist zu beachten, dass unter der Annahme, dass nur zwei Zeilen angezeigt werden sollen, das Ende der zweiten Zeile mit Auslassungspunkten und das Ende der dritten Zeile angezeigt wird ...N Zeilen werden weiterhin angezeigt, wenn die Höhe der Beschriftung hoch genug ist. Um die Anzeige der Zeilenanzahl zu steuern, muss daher zusätzlich zum Festlegen des CSS-Stils auch die Höheneinstellung kombiniert werden des Etiketts.

Empfohlenes Lernen: „CSS-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um nur eine Zeile anzuzeigen, wenn mehr als drei Zeilen überschritten werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!