Codeanzeige:
overflow : hidden; /*text-overflow: ellipsis; 有些示例里需要定义该属性,实际可省略*/ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
Übersicht
-webkit-line-clamp ist eine nicht unterstützte WebKit-Eigenschaft, die nicht im Entwurf der CSS-Spezifikation erscheint.
Begrenzen Sie die Anzahl der Textzeilen, die in einem Blockelement angezeigt werden. Um diesen Effekt zu erzielen, muss es mit anderen fremden WebKit-Eigenschaften kombiniert werden. Häufig kombinierte Attribute:
display: -webkit-box; Attribute, die kombiniert werden müssen, um das Objekt als elastisch skalierendes Boxmodell anzuzeigen.
-webkit-box-orient muss mit dem Attribut kombiniert werden, um die Anordnung der untergeordneten Elemente des Flex-Box-Objekts festzulegen oder abzurufen.
Textüberlauf, der verwendet werden kann, um bei mehrzeiligem Text Text außerhalb des zulässigen Bereichs mit den Auslassungspunkten „…“ auszublenden.
Alle Codes:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>css3截取字符串多行</title> <style> .box { width: 400px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } </style> </head></p> <p><body> <div class="box"> css3截取字符串多行,css3截取字符串多行,css3截取字符串多行,css3截取字符串多行,css3截取字符串多行, </div> </body> </html>
Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um Text abzuschneiden und Auslassungspunkte hinzuzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!