line-clamp

Limited availability

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

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

Hinweis: Für die Unterstützung älterer Browser funktioniert die Anbieter-präfixierte Eigenschaft -webkit-line-clamp 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. Obwohl diese präfixierten Eigenschaften veraltet sind, ist die Abhängigkeit dieser drei Eigenschaften ein vollständig spezifiziertes Verhalten und wird weiterhin unterstützt.

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

Wenn es auf Ankerelemente angewendet wird, kann die Verkürzung in der Mitte des Textes auftreten, nicht unbedingt am Ende.

Syntax

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

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

/* Global values */
line-clamp: inherit;
line-clamp: initial;
line-clamp: revert;
line-clamp: revert-layer;
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. Dieser muss größer als 0 sein.

Formale Definition

Anfangswertnone
Anwendbar aufBlockcontainer außer mehrspaltige Container
VererbtNein
Berechneter Wertwie angegeben
AnimationstypInteger

Formale Syntax

line-clamp = 
  none                                   |
  <integer [1,∞]> || <'block-ellipsis'>  

<block-ellipsis> = 
  none      |
  auto      |
  <string>

Beispiele

Verkürzen 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