CSS max-lines-Eigenschaft

Die CSS max-lines-Eigenschaft begrenzt die Anzahl der sichtbaren Zeilen in einem Block-Container. Wenn der Inhalt dieses Limit überschreitet, wird er durch die Overflow-Verarbeitung des Containers abgeschnitten. Dieses Verhalten funktioniert in Kombination mit block-overflow: clamp;, um den überschüssigen Inhalt sauber auszublenden.

Die max-lines-Eigenschaft kann in Verbindung mit der block-overflow-Eigenschaft einen Clamp-Effekt erzeugen.

INFO

Diese Eigenschaft befindet sich in der Entwicklung.

Denken wir daran, dass die line-clamp-Eigenschaft eine Kurzschreibweise für die max-lines- und block-overflow-Eigenschaften ist.

WARNING

Die max-lines-Eigenschaft wird derzeit nicht von allen Browsern unterstützt. Für eine breitere Kompatibilität können Sie die -webkit-line-clamp-Eigenschaft als Fallback verwenden.

INFO

Die Browser-Unterstützung ist begrenzt. Prüfen Sie MDN für aktuelle Kompatibilitätsinformationen.

Anfangswert	none
Anwendbar auf	Fragment-Boxen.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS Overflow Module Level 4
DOM-Syntax	object.style.maxLines = "2";

Syntax

Syntax der CSS max-lines-Eigenschaft

css

max-lines: none | <integer> | initial | inherit;

Beispiel zur max-lines-Eigenschaft:

Beispiel zur CSS max-lines-Eigenschaft

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        overflow: hidden;
        box-sizing: content-box;
        width: 300px;
        font-size: 16px;
        line-height: 24px;
        font-family: Helvetica, sans-serif;
        max-lines: 3;
        block-overflow: clamp;
        -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>

Try it Yourself »

Werte

Wert	Beschreibung
none	Es wird 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 zurück.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Praxis

Welche Funktion hat die 'max-lines'-Eigenschaft in CSS?

Sie legt die maximale Anzahl von Wörtern in einem Text fest.Sie legt die maximale Anzahl von Zeilen in einem Block fest.Sie legt die maximale Höhe eines Elements fest.Sie wird verwendet, um Text auf eine bestimmte Anzahl von Zeilen zu kürzen.Sie macht einen Text fett.

CSS max-lines-Eigenschaft ​

Syntax ​

Beispiel zur max-lines-Eigenschaft: ​

Werte ​

Praxis ​

CSS max-lines-Eigenschaft

Syntax

Beispiel zur max-lines-Eigenschaft:

Werte

Praxis