Die block-overflowEigenschaft schneidet Text ab und zeigt an, dass weitere Inhalte folgen, indem nach einer von der max-linesEigenschaft festgelegten Anzahl von Zeilen ein Auslassungszeichen oder eine benutzerdefinierte Zeichenfolge eingefügt wird .
Die Eigenschaft wurde im Entwurf des Herausgebers der Spezifikation des CSS-Überlaufmoduls Stufe 3 eingeführt. Das heißt, es ist im Moment experimentell und wird als in Arbeit angesehen. Tatsächlich können Sie der Konversation folgen, die das Geschwätz über das Umbenennen der Eigenschaft insgesamt enthält.
Syntax
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow akzeptiert die folgenden Werte:
clip: Fügt kein Zeichen ein, um mehr Text anzuzeigen, der folgen soll. Stattdessen wird der Inhalt lediglich abgeschnitten und beim letzten Zeichen abgeschnitten.ellipsis: Zeigt am Ende der letzten Zeile eine Ellipse (…) an. Es sollte als Unicode-Zeichen (U + 2026) gerendert werden, kann jedoch durch ein Äquivalent ersetzt werden, das auf der Inhaltssprache und dem Schreibmodus des verwendeten User-Agent basiert.: Zeigt benutzerdefinierten Text (z. B. „Weiterlesen →“) am Ende der letzten Zeile an. Die Spezifikation besagt, dass der User-Agent die Zeichenfolge durch ein Auslassungszeichen ersetzen kann, wenn die Zeichenfolge „absurd“ lang ist.
Auch dies alles ist experimentelle, laufende Arbeit. Diese Werte können sich ändern. Oder es könnten weitere hinzugefügt werden. Zum Beispiel wurde eine „intelligentere“ Ellipse gefordert, die möglicherweise mehr Dinge tun kann, z. B. das Zuschneiden von Text in der Mitte:
One thing led to another and… yada yada yada, that was that.Verwendung line-clampfür kurze
Wir können genau das Gleiche bekommen, line-clampwas für die block-overflowund max-lines-Eigenschaften eine Abkürzung ist .
Wie derzeit definiert, line-clampakzeptiert es jedoch nur einen einzigen numerischen Wert für max-linesund setzt implizit block-overflowauf den ellipsisWert. Wenn Sie also eine benutzerdefinierte Zeichenfolge zum Abschneiden verwenden möchten, müssen Sie stattdessen die lange Form verwenden.
Browser-Unterstützung
Momentan keine, aber Sie können Unterstützung erhalten, indem Sie die proprietäre WebKit-Implementierung von line-clamp:
Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrom | Feuerfuchs | IE | Kante | Safari |
|---|---|---|---|---|
| 14 * | 68 * | Nein | 17 | 5 * |
Handy / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | 85 * | 2,3 * | 5,0-5,1 * |