W3docs
en
Log in

CSS block-overflow Property

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

The block-overflow property controls how content is clipped when it overflows a block container, optionally inserting an ellipsis or custom string to indicate more content follows.

Warning

If the box contains no line box immediately preceding a region break, then the block-overflow property does not work. (A region break occurs when content flows into a CSS region or multi-column layout.)

Initial Valueclip
Applies toBlock containers.
InheritedNo.
AnimatableNo.
VersionCSS Overflow Module Level 4
DOM Syntaxobject.style.blockOverflow = "ellipsis";

Syntax

Syntax of CSS block-overflow Property

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

Practical Example

Example of CSS block-overflow Property

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

Relationship with line-clamp

The CSS line-clamp property is a shorthand for overflow-block and max-lines. It implies block-overflow: ellipsis and limits text to a specific number of lines.

Values

ValueDescription
clipThe content is clipped at the edge of the box.
ellipsisDisplays an ellipsis (...) at the end of the last line. It renders as a Unicode character (U+2026) but could be changed by an equivalent based on the content language and writing mode of the User Agent being used.
<string>Renders the specified string as the block overflow ellipsis at the end of the last line. The browser may truncate the string if it is extremely long.
.custom-ellipsis {
  block-overflow: "...";
}

Practice

Practice

How is CSS overflow property used?