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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
line-clamp
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch