CSS block-overflow-Eigenschaft

Die Eigenschaft block-overflow steuert, was an der Stelle passiert, an der ein Blockcontainer in der Blockrichtung (vertikal bei horizontalen Schreibmodi) abgeschnitten wird. Anstatt den Text einfach abzuschneiden, können Sie den Kürzungspunkt mit einem Auslassungszeichen (…) oder einer eigenen Zeichenfolge markieren und dem Leser signalisieren, dass weiterer Inhalt folgt.

Sie ist Teil des CSS Overflow Module Level 4 und das mehrzeilige Gegenstück zu text-overflow: Während text-overflow: ellipsis eine einzelne Zeile in der Inline-Richtung kürzt, steuert block-overflow die Markierung, die angezeigt wird, wenn Inhalt über mehrere Zeilen hinweg abgeschnitten wird (beispielsweise durch max-lines oder line-clamp).

block-overflow wird nur an einem erzwungenen Kürzungspunkt wirksam — etwa in der letzten sichtbaren Zeile, die durch max-lines erlaubt ist, oder in dem Zeilenfeld unmittelbar vor einem Bereichsumbruch. Allein begrenzt es nicht die Anzahl der angezeigten Zeilen; kombinieren Sie es dafür mit max-lines.

Syntax

block-overflow: clip | ellipsis | <string>;

Der Wert ist ein einzelnes Schlüsselwort (clip oder ellipsis) oder eine in Anführungszeichen stehende <string>-Angabe.

Mehrere Zeilen kürzen

block-overflow ist dafür gedacht, mit max-lines zusammenzuarbeiten, das die Anzahl der Zeilen begrenzt, und der Eigenschaft continue, die das Element als kürzbar markiert. Das folgende Beispiel beschränkt eine Kartenbeschreibung auf drei Zeilen und zeigt in der dritten ein Auslassungszeichen:

.card-description {
  max-lines: 3;            /* keep only the first three lines      */
  continue: discard;       /* truncate the rest                    */
  block-overflow: ellipsis; /* show … at the truncation point      */
}

<p class="card-description">
  This description is long enough to wrap onto many lines. Only the
  first three are kept, and the third ends with an ellipsis so the
  reader knows the text continues beyond what is shown here.
</p>

Da noch kein Browser diesen Satz unterstützt, ist das praktische Äquivalent, das in der Produktion funktioniert, line-clamp:

.card-description {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

Beziehung zu line-clamp

Die Eigenschaft line-clamp ist eine Kurzschreibweise, die max-lines, block-overflow und continue auf einmal setzt. line-clamp: 3 impliziert block-overflow: ellipsis und begrenzt den Block auf drei Zeilen — deshalb setzt man block-overflow selten direkt; stattdessen lässt man line-clamp dies übernehmen.

Werte

Eine benutzerdefinierte Zeichenfolge ersetzt das Standard-Auslassungszeichen. Dies ist nützlich für lokalisierte oder markenspezifische Kürzungsmarkierungen wie "… weiterlesen":

.custom-ellipsis {
  block-overflow: "… read more";
}

block-overflow vs. text-overflow

Diese beiden Eigenschaften lösen verwandte Probleme auf unterschiedlichen Achsen und werden leicht verwechselt:

Wenn Sie einen einzeiligen Titel benötigen, der mit einem Auslassungszeichen endet, verwenden Sie text-overflow. Wenn Sie einen mehrzeiligen Auszug benötigen, der mit einem Auslassungszeichen endet, greifen Sie heute auf line-clamp zurück (und sobald die Browser es unterstützen, auf block-overflow).

Übung