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.
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. |
Browser support
14.0 -webkit- |
✕ |
5.0 -webkit- |
15.0 -webkit- |
Practice Your Knowledge
How is CSS overflow property used?
Correct!
Incorrect!
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.