W3docs
de
Anmelden

CSS block-overflow-Eigenschaft

The block-overflow CSS property is used to truncate the text and specify more content. Read about property values.

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.)

Anfangswertclip
Anwendbar aufBlock-Container.
VererbbarNein.
AnimierbarNein.
VersionCSS Overflow Module Level 4
DOM-Syntaxobject.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

WertBeschreibung
clipDer Inhalt wird am Rand der Box abgeschnitten.
ellipsisZeigt 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

Übung

Wie wird die CSS overflow-Eigenschaft verwendet?