line-clamp CSS property
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Die line-clamp CSS-Eigenschaft ermöglicht das Begrenzen der Inhalte eines Blocks auf die angegebene Anzahl von Zeilen.
Hinweis:
Für die Unterstützung älterer Browser funktioniert die herstellerpräfixierte Eigenschaft -webkit-line-clamp nur in Kombination mit der display-Eigenschaft, die auf -webkit-box oder -webkit-inline-box eingestellt ist, und der -webkit-box-orient-Eigenschaft, die auf vertical eingestellt ist. Obwohl diese präfixierten Eigenschaften veraltet sind, ist die Abhängigkeit dieser drei Eigenschaften voneinander vollständig spezifiziert 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 ein Auslassungszeichen wird dennoch nach der angegebenen Anzahl von Zeilen angezeigt.
Bei Anwendung auf Ankerelemente kann die Kürzung in der Mitte des Textes erfolgen, nicht unbedingt am Ende.
Syntax
/* 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
Diese Eigenschaft wird als einzelner Wert aus der folgenden Liste angegeben:
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | Blockcontainer außer mehrspaltige Container |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | Integer |
Formale Syntax
line-clamp =
none |
[ <integer [1,∞]> || <'block-ellipsis'> ] -webkit-legacy?
<integer> =
<number-token>
<block-ellipsis> =
no-ellipsis |
auto |
<string>
Beispiele
Kürzen eines Absatzes
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
p {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Overflow Module Level 4 # propdef-line-clamp |