CSS block-overflow Property

The block-overflow property cuts the text and indicates more content follows by inserting an ellipsis or custom string after a number of lines.

If the box contains no line box immediately preceding a region break, then the block-overflow property does not work.

Initial Value clip
Applies to Block containers.
Inherited Yes.
Animatable No.
Version CSS3
DOM Syntax object.style.blockOverflow= "ellipsis";


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


.module {
block-overflow: [clip | ellipsis | 
max-lines: [
]; /* required by block-overflow */


Value Description
clip The rendering is not affected.
ellipsis Displays an ellipsis (...) at the end of the last line. It render as a Unicode character (U+2027) 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.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.

Browser support

17.0+ x 5.0

Practice Your Knowledge

The block-overflow property has the following values, except

Do you find this helpful?

Related articles