W3docs
de
Anmelden

CSS line-clamp Eigenschaft

Die CSS-Kurzschreibweise line-clamp legt fest, bei welcher Zeile der Text abgeschnitten wird. Definition, Werte und Beispiele.

Die Eigenschaft line-clamp kürzt einen Textblock auf eine bestimmte Anzahl von Zeilen und fügt an der Stelle, an der der Text abgeschnitten wird, ein Auslassungszeichen (…) ein. Sie ist die Standardmethode, um mehrzeilige „Weiterlesen"-Vorschauen zu erstellen – beispielsweise um eine Kartenbeschreibung unabhängig von der tatsächlichen Länge auf drei Zeilen zu begrenzen.

Diese Seite behandelt die Syntax, ein funktionierendes Beispiel, die unterstützenden Eigenschaften, von denen line-clamp abhängt, die Browserunterstützung und das -webkit--Präfix sowie die Einschränkungen der Eigenschaft.

Warum line-clamp verwenden

Vor line-clamp erforderte das Begrenzen von Text auf eine Zeile die Kombination von overflow: hidden, white-space: nowrap und text-overflow: ellipsis. Dieser Trick funktioniert jedoch nur für eine einzelne Zeile – white-space: nowrap hält alles in einer Zeile. line-clamp löst den mehrzeiligen Fall, bei dem genau drei umbrochene Zeilen gefolgt von einem Auslassungszeichen gewünscht werden.

Syntax

line-clamp: none | <integer>;

Verwende none, um die Begrenzung zu deaktivieren, oder eine positive ganze Zahl für die maximale Anzahl anzuzeigender Zeilen.

Beispiel der line-clamp Eigenschaft

Das folgende Beispiel begrenzt den Absatz auf drei Zeilen. Beachte die drei Begleiteigenschaften – display: -webkit-box, -webkit-box-orient: vertical und overflow: hidden –, die erforderlich sind, damit die Begrenzung wirksam wird (siehe Unterstützende Eigenschaften weiter unten).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h2>CSS line-clamp  property example</h2>
    <div class="element">
      <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.</p>
    </div>
  </body>
</html>
Probier es selbst »

Ergebnis

![CSS line-clamp Eigenschaft](/uploads/media/default/0001/04/510c4d8bde7d07ba0ff1b843ad8b4dfdc122aadf.png "CSS line-clamp Eigenschaft Ergebnis" =420x)

Im gegebenen Beispiel wird der Text in der dritten Zeile abgeschnitten. Da -webkit-line-clamp die Form ist, die Browser tatsächlich implementieren, werden sowohl -webkit-line-clamp: 3 als auch das standardisierte line-clamp: 3 deklariert, damit die Regel heute überall funktioniert und gültig bleibt, wenn die Eigenschaft ohne Präfix zunehmend unterstützt wird.

Unterstützende Eigenschaften

line-clamp funktioniert nicht allein. Das Element muss eine Flex-Box erstellen und den Überlauf ausblenden:

EigenschaftWarum sie benötigt wird
display: -webkit-boxSchaltet das Element auf das ältere Flexbox-Layout um, gegen das line-clamp definiert ist.
-webkit-box-orient: verticalOrdnet die Zeilen der Box vertikal an, damit sie gezählt und begrenzt werden können.
overflow: hiddenBlendet die Zeilen über dem Limit aus; ohne sie läuft der Text über und es erscheint kein Auslassungszeichen.

Werte

WertBeschreibung
noneKeine maximale Zeilenanzahl und keine Kürzung.
<integer>Legt die maximale Anzahl von Zeilen fest, bevor der Inhalt gekürzt wird, und zeigt anschließend ein Auslassungszeichen an.

Einschränkungen der CSS line-clamp Eigenschaft

Die Eigenschaft ist praktisch, hat jedoch einige Einschränkungen, die es wert sind, bekannt zu sein:

  1. Sie setzt das -webkit--Präfix voraus. In allen aktuell unterstützten Browsern ist die funktionierende Eigenschaft -webkit-line-clamp. Das unpräfixierte line-clamp ist Teil des CSS Overflow Module Level 4 und wird zunehmend übernommen, aber die präfixierte Version sollte zur Kompatibilität weiterhin deklariert werden.
  2. Das Auslassungszeichen kann nicht angepasst werden. Das Kürzungszeichen ist fest und passt möglicherweise nicht gut zu jeder Sprache oder Schriftdarstellung.
  3. Es erfordert mehrere unterstützende Eigenschaften, um wirksam zu werden – es kann nicht auf einem einfachen Block-Element verwendet werden:
.element {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

Du kannst die Regeln in eine Feature-Abfrage einschließen, wenn du die Unterstützung vor der Anwendung erkennen möchtest:

@supports (-webkit-line-clamp: 2) {
  .element {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
Anfangswertnone
Gilt für-
VererbtJa.
AnimierbarNein.
VersionCSS Overflow Module Level 4
DOM Syntaxobject.style.lineClamp = "2";
Warnung

Hinweis: display: -webkit-box ist eine veraltete, nicht standardmäßige Flexbox-Implementierung, die von älteren WebKit-Browsern verwendet wird. Sie wird hier ausschließlich als Fallback für Kompatibilitätszwecke beibehalten.

Verwandte Themen

  • CSS text-overflow — eine einzelne Zeile mit einem Auslassungszeichen begrenzen.
  • CSS overflow — steuern, wie überlaufender Inhalt angezeigt oder ausgeblendet wird.
  • CSS white-space — Umbrüche verwalten, die Ergänzung zur einzeiligen Kürzung.
  • CSS overflow-wrap — lange Wörter umbrechen, damit sie nicht überlaufen.

Übungen

Übung
Was ist die Funktion von line-clamp in CSS?
Was ist die Funktion von line-clamp in CSS?
Was this page helpful?