CSS-Eigenschaft line-clamp

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+ 5.1
-webkit-
15
-webkit-


Finden Sie das nützlich?

Ähnliche Artikel