Die Eigenschaft line-clamp verkürzt den Text auf einer bestimmten Anzahl von Zeilen. Es ist eine Abkürzung für die Eigenschaften:
Diese Eigenschaft ist in Bearbeitung.
| Anfangswert | none |
| Gilt für | - |
| Geerbt | Ja |
| Animierbar | Nein |
| Version | CSS3 |
| DOM Syntax | object.style.lineClamp = "2"; |
Syntax
line-clamp: normal | <integer> | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</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;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<h2>Beispiel für die CSS-Eigenschaft line-clamp</h2>
<div class="element">
<p>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren.
<p>
</div>
</body>
</html>Im angegebenen Beispiel wird der Text in der vierten Zeile abgeschnitten.
Werte
| Wert | Beschreibung |
|---|---|
| none | Keine maximale Anzahl von Zeilen und keine Trunkierung. |
| <integer> | Stellt die maximale Anzahl von Zeilen vor dem Abschneiden des Inhalts ein und zeigt dann eine Ellipse an. |
| initial | Der Wert stellt die Eigenschaft auf seinen Standardwert ein. |
| inherit | Der Wert erbt die Eigenschaft von seinem übergeordneten Element. |
Browser-Support
|
|
|
|
|
|---|---|---|---|---|
|
14.0 -webkit- |
17.0+ | 68+ |
5.1 -webkit- |
15 -webkit- |
Übe dein Wissen
Was ist die CSS-Eigenschaft 'line-clamp' und wie wird sie verwendet?
Richtig!
Falsch!