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

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


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.


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

chrome firefox safari opera

Practice Your Knowledge

How is CSS overflow property used?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?