CSS-Eigenschaft max-lines

Die CSS-Eigenschaft max-lines wird verwendet, um den Inhalt eines Blocks auf eine maximale Anzahl von Zeilen zu beschränken, bevor er abgeschnitten wird.

Die Eigenschaft max-lines erzeugt Klemmwirkung bei block-overflow.

Bemerken Sie bitte, dass die Eigenschaft line-clamp eine Abkürzung für die Eigenschaften max-lines und block-overflow ist.

Diese Eigenschaft ist in Bearbeitung.
Negative Werte sind ungültig.
Anfangswert none
Gilt für Fragment-Boxen
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.maxLines = "2";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft max-lines</h2>
    <p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</p>
  </body>
</html>

Werte

Wert Beschreibung
none Es wird keine maximale Anzahl von Zeilen angegeben.
<integer> Stellt die Anzahl der Zeilen, bevor der Inhalt verworfen wird, ein. Negative Werte sind ungültig.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera

Übe dein Wissen

Welche der folgenden Aussagen über die CSS-Eigenschaft 'max-lines' ist/sind korrekt?
Finden Sie das nützlich?