DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!
block-overflow
属性会截断文本,并在 max-lines
属性设置的行数后插入省略号或自定义字符串,以指示还有更多内容。
该属性已在 CSS Overflow 模块第 3 级规范 的编辑草案中引入。 这意味着它目前处于实验阶段,被认为是正在进行的工作。 实际上,您可以 关注对话,其中包括关于完全重命名该属性的讨论。
语法
.module {
block-overflow: [clip | ellipsis | ];
max-lines: []; /* required by block-overflow */
}
block-overflow
接受以下值
clip
:不插入任何字符来指示还有更多文本。 相反,内容只是被截断,并在最后一个字符处被切断。ellipsis
:在最后一行末尾显示省略号 (…)。 它应该呈现为一个 Unicode 字符(U+2026),但可能会根据正在使用的用户代理的内容语言和书写模式进行替换。<string>
:在最后一行末尾显示自定义文本(例如,“阅读更多 →”)。 规范指出,如果字符串“过长”,用户代理可能会用省略号替换该字符串。
同样,所有这些都是实验性的,正在进行的工作。 这些值可能会发生变化。 或者,可能会添加更多内容。 例如,已经有人呼吁使用一种“更智能”的省略号,它可能能够做更多的事情,例如在中间裁剪文本。
One thing led to another and
...
yada yada yada, that was that.
line-clamp
对短文本使用 我们可以使用 line-clamp
获得几乎相同的结果,它是在 block-overflow
和 max-lines
属性的简写形式。
但是,根据目前的定义,line-clamp
仅接受 max-lines
的单个数字值,并隐式将 block-overflow
设置为 ellipsis
值。 因此,如果您想使用自定义字符串来截断文本,则必须使用长格式。
浏览器支持
目前没有,但您可以使用 WebKit 对 line-clamp
的私有实现获得一些支持。
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
14* | 68* | 否 | 17 | 5* |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127* | 127* | 2.3* | 5.0-5.1* |
更多信息
- CSS Overflow 模块第 3 级 – 引入块溢出的编辑草案
- Safari CSS 参考 – 未支持的 WebKit 实现的文档
- 行夹紧(截断多行文本) – 由 Chris Coyier 撰写
- Clamp.js – 一种用于跨浏览器支持的 JavaScript 方法
- 卡片 UI 的缺陷 – Dave Rupert 考虑了截断文本的危险。