-webkit-line-clamp

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die -webkit-line-clamp CSS Eigenschaft ermöglicht es, den Inhalt eines Blocks auf die angegebene Anzahl von Zeilen zu begrenzen.

Sie funktioniert nur in Kombination mit der display Eigenschaft, die auf -webkit-box oder -webkit-inline-box gesetzt ist, und der -webkit-box-orient Eigenschaft, die auf vertical gesetzt ist. Trotz ihres veralteten Status ist die gegenseitige Abhängigkeit dieser drei Eigenschaften vollständig spezifiziert und wird weiterhin unterstützt.

In den meisten Fällen möchten Sie auch overflow auf hidden setzen, da sonst der Inhalt nicht abgeschnitten wird, aber ein Auslassungszeichen dennoch nach der angegebenen Anzahl von Zeilen angezeigt wird.

Wenn sie auf Ankerelemente angewendet wird, kann das Abschneiden in der Mitte des Textes erfolgen, nicht unbedingt am Ende.

Hinweis: Diese Eigenschaft wurde ursprünglich in WebKit implementiert und hat einige Probleme, wie zum Beispiel die Abhängigkeit von zwei anderen älteren Eigenschaften. Sie wurde im CSS Overflow Module Level 4 für Legacy-Unterstützung standardisiert. Das CSS Overflow Module Level 4 definiert auch eine line-clamp Eigenschaft, die diese Eigenschaft ersetzen und ihre Probleme vermeiden soll. Alle Browser, die line-clamp unterstützen, werden jedoch auch -webkit-line-clamp aus Kompatibilitätsgründen unterstützen.

Syntax

css
/* Keyword value */
-webkit-line-clamp: none;

/* <integer> values */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/* Global values */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: revert;
-webkit-line-clamp: revert-layer;
-webkit-line-clamp: unset;

Werte

none

Dieser Wert gibt an, dass der Inhalt nicht abgeschnitten wird.

<integer>

Dieser Wert gibt die Anzahl der Zeilen an, nach denen der Inhalt abgeschnitten wird. Es muss größer als 0 sein.

Formale Definition

Initialer Wertnone
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypby computed value type

Formale Syntax

-webkit-line-clamp = 
  none             |
  <integer [1,∞]>

Beispiele

Abschneiden eines Absatzes

HTML

html
<p>
  In this example the <code>-webkit-line-clamp</code> property is set to
  <code>3</code>, which means the text is clamped after three lines. An ellipsis
  will be shown at the point where the text is clamped.
</p>

CSS

css
p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Ergebnis

Spezifikationen

Specification
CSS Overflow Module Level 4
# propdef-line-clamp

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch