line-clamp CSS property
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
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 vendor-präfixierte -webkit-line-clamp-Eigenschaft 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 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, da ansonsten der Inhalt nicht abgeschnitten wird, aber dennoch ein Auslassungszeichen nach der angegebenen Anzahl von Zeilen angezeigt wird.
Wenn die Eigenschaft auf Ankerelemente angewendet wird, kann die Trunkierung in der Mitte des Textes und nicht unbedingt am Ende erfolgen.
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
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 |