block-overflow
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.
Syntax
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 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
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. |