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
|
|
|
|
|
|---|---|---|---|---|
| ✕ | ✕ | ✕ | ✕ | ✕ |
Übe dein Wissen
Welche der folgenden Aussagen über die CSS-Eigenschaft 'max-lines' ist/sind korrekt?
Richtig!
Falsch!