CSS block-overflow Property

❮ Prev Next ❯

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

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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";

In OS X Lion, by default scrollbars are hidden. They are shown only when they are being used.

Syntax

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

The code below shows the usage of the block-overflow property:

.module {
  block-overflow: [clip | ellipsis | <string>];
  max-lines: [ <integer>];
  /* required by block-overflow */
}

The line-clamp as a shorthand property for block-overflow

The CSS line-clamp property is a shorthand for block-overflow and max-lines properties. It truncates text at a specific number of lines. It limits the text, after you tell it the desirable number of lines, adding an ellipsis after the last word or portion of a word that is demonstrated.

Values

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.