CSS block-overflow-Eigenschaft

Die block-overflow-Eigenschaft steuert, wie Inhalte abgeschnitten werden, wenn sie einen Block-Container überlaufen, und fügt optional Auslassungspunkte oder einen benutzerdefinierten String hinzu, um anzuzeigen, dass weitere Inhalte folgen.

Warnung

Wenn die Box unmittelbar vor einem Regionsbruch kein Zeilenfeld enthält, funktioniert die block-overflow-Eigenschaft nicht. (Ein Regionsbruch tritt auf, wenn Inhalte in eine CSS-Region oder ein mehrspaltiges Layout fließen.)

Anfangswert	clip
Anwendbar auf	Block-Container.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS Overflow Module Level 4
DOM-Syntax	object.style.blockOverflow = "ellipsis";

Syntax

Syntax der CSS block-overflow-Eigenschaft

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

Praxisbeispiel

Beispiel für die CSS block-overflow-Eigenschaft

.module {
  block-overflow: ellipsis;
}

<div class="module">
  <p>This is a long paragraph that will be clipped at the container's edge, with an ellipsis added to indicate more content follows.</p>
</div>

Beziehung zu line-clamp

Die CSS-line-clamp-Eigenschaft ist eine Kurzschreibweise für overflow-block und max-lines. Sie impliziert block-overflow: ellipsis und begrenzt den Text auf eine bestimmte Anzahl von Zeilen.

Werte

Wert	Beschreibung
clip	Der Inhalt wird am Rand der Box abgeschnitten.
ellipsis	Zeigt am Ende der letzten Zeile Auslassungspunkte (...) an. Es wird als Unicode-Zeichen (U+2026) gerendert, kann aber durch ein Äquivalent ersetzt werden, das auf der Inhaltssprache und dem Schreibmodus des verwendeten User Agents basiert.
<string>	Rendert die angegebene Zeichenkette als Block-Overflow-Auslassungspunkte am Ende der letzten Zeile. Der Browser kann die Zeichenkette kürzen, wenn sie extrem lang ist.

.custom-ellipsis {
  block-overflow: "...";
}

Praxis

Wie wird die CSS overflow-Eigenschaft verwendet?

Sie hilft, den Inhalt innerhalb des gewählten Box-Modells zu halten.Sie wird verwendet, um das Überlaufen von Inhalten zu verhindern.Sie wird angewendet, wenn der Inhalt zu groß ist, um in den umrissenen Bereich zu passen.Sie hat keinen Einfluss auf die Anzeige von Inhalten.Sie kann überlaufende Inhalte ausblenden oder bei Bedarf als Scrollbereich anzeigen.