block-overflow 属性通过在多行后插入省略号或者自定义字符串来剪切文本并指示更多内容。
如果框不包含紧邻区域中断之前的行框,则块溢出属性不起作用。
| 初始值 | clip |
|---|---|
| 应用于 | 块容器。 |
| 继承 | 可继承 |
| 可动画的 | 无效 |
| 版本 | CSS3 |
| DOM 语法 | object.style.blockOverflow=“ellipsis”; |
在 OS X Lion 中,默认情况下滚动条是隐藏的。
它们仅在使用时显示。
语法
block-overflow: clip | ellipsis | <string> | initial | inherit;
下面的代码展示了 block-overflow 属性的用法:
.module {
block-overflow: [clip | ellipsis | <string>];
max-lines: [ <integer>];
/* required by block-overflow */
}
CSS block-overflow 属性值说明
| 值 | 说明 |
|---|---|
| clip | 渲染不受影响。 |
| ellipsis | 在最后一行的末尾显示省略号(…)。它呈现为Unicode字符(U+2027),但可以根据所使用的用户代理的内容语言和写入模式由等效字符更改。 |
| <string> | 将指定的字符串呈现为最后一行末尾的块溢出省略号。如果字符串非常长,浏览器可能会截断它。 |
| initial | 它使属性使用其默认值。 |
| inherit | 它从其父元素继承属性。 |
line-clamp 作为块溢出的速记属性
CSS line-clamp 属性是 block-overflow 和 max-lines 属性的简写。
它以特定的行数截断文本。
它限制了文本,在我们告诉它所需的行数后,在演示的最后一个单词或者单词的一部分之后添加省略号。
日期:2020-06-02 22:14:17 来源:oir作者:oir
