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 Block-Elements auf eine angegebene Anzahl von Zeilen zu begrenzen.
Hinweis:
Für die Unterstützung älterer Browser funktioniert die Anbieterpräfix-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 gepraiften Eigenschaften veraltet sind, ist die Ko-Abhängigkeit dieser drei Eigenschaften ein vollständig spezifiziertes Verhalten und wird weiterhin unterstützt.
In den meisten Fällen möchten Sie wahrscheinlich auch overflow auf hidden setzen, andernfalls wird der Inhalt nicht abgeschnitten, aber ein Auslassungszeichen wird dennoch nach der angegebenen Anzahl von Zeilen angezeigt.
Wenn auf Ankerelemente angewendet, 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…