CSS block-overflow Property

The block-overflow property controls what happens at the point where a block container is truncated in the block direction (vertically, in horizontal writing modes). Instead of simply cutting text off, it lets you mark the truncation point with an ellipsis (…) or a custom string, signalling to the reader that more content follows.

It is part of the CSS Overflow Module Level 4 and is the multi-line counterpart to text-overflow: where text-overflow: ellipsis truncates a single line in the inline direction, block-overflow controls the marker shown when content is truncated across several lines (for example by max-lines or line-clamp).

block-overflow only takes effect at a forced truncation point — for instance the last visible line allowed by max-lines, or the line box immediately before a region break. On its own it does not limit how many lines are shown; pair it with max-lines for that.

Syntax

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

The value is a single keyword (clip or ellipsis) or a quoted <string>.

Truncating multiple lines

block-overflow is meant to work together with max-lines, which caps the number of lines, and the continue property, which marks the box as truncatable. The example below limits a card description to three lines and shows an ellipsis on the third:

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

Because no browser supports this stack yet, the practical equivalent that works in production is line-clamp:

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

Relationship with line-clamp

The line-clamp property is a shorthand that sets max-lines, block-overflow, and continue at once. Writing line-clamp: 3 implies block-overflow: ellipsis and limits the block to three lines, so you rarely set block-overflow directly — you let line-clamp set it for you.

Values

A custom string replaces the default ellipsis. This is useful for localized or branded truncation markers such as "… read more":

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

block-overflow vs. text-overflow

These two properties solve related problems on different axes, and are easy to confuse:

If you need a one-line title that ends in an ellipsis, reach for text-overflow. If you need a multi-line excerpt that ends in an ellipsis, reach for line-clamp today (and block-overflow once browsers support it).

Practice