CSS line-clamp-Eigenschaft
Die line-clamp-Eigenschaft kürzt Text nach einer angegebenen Anzahl von Zeilen. Sie begrenzt den Text auf die gewünschte Zeilenanzahl und fügt nach dem letzten sichtbaren Wort oder einem Wortteil einen Auslassungspunkt (...) hinzu.
Syntax
Syntax der CSS line-clamp-Eigenschaft
line-clamp: none | <integer>;Beispiel zur line-clamp-Eigenschaft:
Beispiel zur CSS line-clamp-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
align-items: center;
background: radial-gradient( farthest-side at bottom left, #eee, #ccc),
radial-gradient( farthest-corner at bottom right, #eee, #ccc 400px);
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
line-height: 1.5;
}
.element {
background-color: #fff;
box-shadow: 1px 1px 10px #666;
padding: 2em;
width: 200px;
}
.element p {
display: -webkit-box;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<h2>CSS line-clamp property example</h2>
<div class="element">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</body>
</html>Ergebnis
Im obigen Beispiel wird der Text an der dritten Zeile abgeschnitten.
Werte
| Wert | Beschreibung |
|---|---|
| none | Keine maximale Zeilenanzahl und kein Abschneiden. |
<integer> | Legt die maximale Zeilenanzahl fest, bevor der Inhalt abgeschnitten und ein Auslassungspunkt angezeigt wird. |
Nachteile der CSS line-clamp-Eigenschaft
Die CSS line-clamp-Eigenschaft weist einige Einschränkungen auf:
- Die Eigenschaft
line-clampwird inzwischen von allen modernen Browsern weitgehend unterstützt. Für ältere Browser, die sie nicht unterstützen, können Sie eine Feature-Abfrage verwenden, um sie bedingt anzuwenden:@supports (line-clamp: 2) { ... }. - Eine Anpassung des Auslassungspunkts ist nicht möglich. Dies kann zu Problemen führen, da der Standard-Auslassungspunkt möglicherweise nicht gut zu verschiedenen Sprachen oder Schriftarten-Renderings passt.
- Die Eigenschaft erfordert mehrere unterstützende Eigenschaften, um korrekt zu funktionieren:
CSS line-clamp-Eigenschaft
.element {
overflow: hidden;
display: -webkit-box;
line-clamp: 2;
-webkit-box-orient: vertical;
}| Anfangswert | none |
|---|---|
| Anwendbar auf | - |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | CSS Overflow Module Level 4 |
| DOM-Syntax | object.style.lineClamp = "2"; |
WARNING
Hinweis: display: -webkit-box ist eine veraltete, nicht standardisierte Flexbox-Implementierung, die von älteren WebKit-Browsern verwendet wird. Sie wird hier ausschließlich als Fallback zur Aufrechterhaltung der Kompatibilität beibehalten.
Praxis
Welche Funktion hat line-clamp in CSS?