block-overflow

Avatar of Geoff Graham
Geoff Graham

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-overflowmax-lines 属性的简写形式。

但是,根据目前的定义,line-clamp 仅接受 max-lines 的单个数字值,并隐式将 block-overflow 设置为 ellipsis 值。 因此,如果您想使用自定义字符串来截断文本,则必须使用长格式。

浏览器支持

目前没有,但您可以使用 WebKit 对 line-clamp 的私有实现获得一些支持。

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
14*68*175*

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
127*127*2.3*5.0-5.1*

更多信息