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 das Begrenzen der Inhalte eines Blocks auf die angegebene Anzahl von Zeilen.
Hinweis:
Für Legacy-Unterstützung funktioniert die herstellerprä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 werden die Inhalte nicht abgeschnitten, aber ein Auslassungszeichen wird nach der angegebenen Anzahl von Zeilen weiterhin angezeigt.
Wenn die Eigenschaft auf Ankerelemente angewendet wird, 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
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?
<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
| Specification |
|---|
| CSS Overflow Module Level 4 # propdef-line-clamp |
Browser-Kompatibilität
Loading…