CSS max-lines Eigenschaft
Verwende die CSS-Eigenschaft max-lines, um die maximale Zeilenanzahl für Inhalt festzulegen. Siehe Beispiele und probiere es selbst aus.
Die CSS-Eigenschaft max-lines begrenzt die Anzahl der sichtbaren Zeilen in einem Block-Container. Sobald der Inhalt dieses Limit überschreitet, werden die zusätzlichen Zeilen aus der Ansicht entfernt, und die Overflow-Behandlung des Containers bestimmt, was mit ihnen geschieht. In der Praxis kombiniert man max-lines mit block-overflow: clamp, damit der Text sauber an der Zeilengrenze abgeschnitten wird, anstatt mitten in einem Zeichen gekürzt zu werden.
Wann würde ich es verwenden?
Der klassische Anwendungsfall ist ein mehrzeiliger „Weiterlesen"-Teaser: eine Karte, ein Nachrichten-Snippet oder eine Produktbeschreibung, die unabhängig von der Länge des Quelltexts niemals mehr als beispielsweise drei Zeilen hoch werden darf. Ohne eine Zeilenbegrenzung schiebt ein langer Absatz alles darunter nach unten und bricht das Layout. max-lines begrenzt die Höhe in Zeilen statt in einem festen Pixel-height-Wert, sodass die Box konsistent bleibt, auch wenn sich Schriftgröße oder Zeilenhöhe ändern.
max-lines ist der Langform-Baustein. Zwei verwandte Eigenschaften ergänzen dieselbe Funktion:
- block-overflow — steuert wie der abgeschnittene Rand dargestellt wird (z. B. fügt
clampan der Schnittstelle eine Ellipse hinzu). - line-clamp — eine Kurzschreibweise, die
max-linesundblock-overflowgemeinsam in einer Deklaration setzt.
max-lines ist Teil des noch in der Entwicklung befindlichen CSS Overflow Module Level 4 und wird zum Zeitpunkt dieser Dokumentation von keinem der großen Browser unterstützt. Für produktive Projekte sollte stattdessen die weit verbreitete Eigenschaft -webkit-line-clamp verwendet werden (im folgenden Beispiel gezeigt). Prüfe stets die aktuelle Unterstützung vor dem Einsatz — siehe MDN's line-clamp reference.
Wie das Clamp heute funktioniert (-webkit-line-clamp)
Da max-lines noch nicht verwendbar ist, besteht die praktische Alternative aus einer kleinen, wohlbekannten Kombination von Eigenschaften:
.teaser {
display: -webkit-box; /* required for the clamp to apply */
-webkit-box-orient: vertical;/* stack the lines vertically */
-webkit-line-clamp: 3; /* keep only the first 3 lines */
overflow: hidden; /* hide everything past the clamp */
}Dies erzeugt dasselbe visuelle Ergebnis, das max-lines: 3 erzeugen soll: höchstens drei Zeilen, mit einer Ellipse (…) an der Stelle, wo der Text abgeschnitten wird. Das weiter unten gezeigte Beispiel verwendet sowohl die experimentelle max-lines-Syntax als auch den -webkit-line-clamp-Fallback zusammen, sodass es graceful degradiert.
| Anfangswert | none |
|---|---|
| Gilt für | Fragment-Boxen. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS Overflow Module Level 4 |
| DOM-Syntax | object.style.maxLines = "2"; |
Syntax
max-lines: none | <integer> | initial | inherit;Beispiel der max-lines-Eigenschaft
Der folgende Absatz ist auf drei Zeilen begrenzt. Die Deklarationen max-lines und block-overflow richten sich an Browser, die die Spezifikation schließlich implementieren; die Deklarationen -webkit-box, -webkit-box-orient und -webkit-line-clamp ermöglichen denselben Effekt in aktuell verfügbaren Browsern.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
width: 300px;
font-size: 16px;
line-height: 24px;
font-family: Helvetica, sans-serif;
overflow: hidden;
/* Experimental, spec-based syntax */
max-lines: 3;
block-overflow: clamp;
/* Widely supported fallback */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
</style>
</head>
<body>
<h2>Max-lines property example</h2>
<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, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| none | Es ist keine maximale Zeilenanzahl festgelegt. |
<integer> | Legt die Anzahl der Zeilen fest, bevor der Inhalt abgeschnitten wird. Negative Werte sind ungültig. |
| initial | Setzt die Eigenschaft auf ihren Standardwert. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Häufige Fallstricke
- Es ist noch keine echte Option. Kein großer Browser unterstützt
max-lines, daher bleibt der Inhalt ohne den-webkit-line-clamp-Fallback unkekürzt. Füge den Fallback immer ein. - Der Clamp benötigt
overflow: hidden. Egal obmax-linesoder der-webkit-box-Ansatz verwendet wird, die überschüssigen Zeilen werden nur versteckt, wenn der Overflow geclippt wird — ohne diese Einstellung quillt der Text nach wie vor heraus. -webkit-line-clamperfordert die Box-Darstellung. Es wirkt nur auf ein Element mitdisplay: -webkit-boxund-webkit-box-orient: vertical. Das Vergessen einer dieser Angaben ist der häufigste Grund, warum der Clamp „nichts tut".- Es zählt Zeilen, nicht Zeichen. Eine breitere Box oder kleinere Schrift passt mehr Text pro Zeile auf, sodass derselbe
max-lines-Wert mehr Wörter anzeigt. Verwende ihn, um die Höhe in Zeilen zu begrenzen, nicht die genaue Textlänge.
Verwandte Eigenschaften
- block-overflow — bestimmt, wie der abgeschnittene Rand dargestellt wird.
- line-clamp — Kurzschreibweise für
max-linesundblock-overflow. - text-overflow — fügt einer einzelnen überlaufenden Zeile eine Ellipse hinzu.
- overflow — steuert, was mit Inhalt passiert, der seine Box überschreitet.