DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!
line-clamp
属性会在特定行数处截断文本。
它的规范目前是编辑草案,这意味着这里没有任何东西是确定的,因为它仍在进行中。 也就是说,它被定义为 max-lines
和 block-overflow
的简写,前者被认为在候选推荐中可能被删除。
很容易理解为什么 max-lines
会被取消,因为它(设置截断前行的行数)的功能已经包含在 line-clamp
中,任何进一步的抽象都可能是多余的。 但这让我们偏离了主题,所以我们继续前进。
语法
.module {
line-clamp: [none | <integer>];
}
line-clamp
接受规范当前草案中的以下值
none
: 不设置行数的最大值,因此不会发生任何截断。<integer>
: 设置截断内容前的最大行数,然后在最后一行末尾显示省略号(…)。
省略号应该渲染为 Unicode 字符(U+2026),但可以根据所用用户代理的内容语言和书写模式进行替换。
text-overflow
来做这个吗?
嘿,我不能用 合理的问题,我的朋友,答案是,嗯……
(看看我做了什么?)
……有点像。
text-overflow
确实有一个 ellipsis
值会截断文本
.truncate {
text-overflow: ellipsis;
/* Needed to make it work */
overflow: hidden;
white-space: nowrap;
}
查看 CodePen 上 Geoff Graham (@geoffgraham) 编写的笔 text-overflow。
不错不错,这是一个好的开始。 但是,如果我们想在第一行而不是某个地方,比如说第三行文本上引入省略号怎么办?
这就是 line-clamp
的用武之地。 只要注意,需要使用三个属性的组合才能实现它
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
查看 CodePen 上 Geoff Graham (@geoffgraham) 编写的笔 line-clamp (-webkit)。
Firefox 现在支持它,完全按照这种方式(带有 -webkit-
前缀以及所有内容)。
所以,有什么问题呢?
截至目前,它是浏览器支持。 行夹紧是 CSS 溢出模块级别 3 的一部分,该模块目前处于编辑草案阶段,并且目前完全不受支持。
我们可以使用 -webkit-
前缀(奇怪的是,它在所有主要浏览器中都有效)来获得一些行夹紧操作。 事实上,上面的演示就是这样完成的。
如果我们愿意,可以走 JavaScript 路线。 Clamp.js 会奏效
查看 CodePen 上 Geoff Graham (@geoffgraham) 编写的笔 line-clamp (clamp.js)。
浏览器支持
这是对 WebKit 专有且未记录的行夹紧实现的支持。
此浏览器支持数据来自 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 溢出模块级别 3 – 引入行夹紧的编辑草案
- Safari CSS 参考 – 未记录的 WebKit 实现的文档
- 行夹紧(截断多行文本) – 由 Chris Coyier 编写
- Clamp.js – 用于跨浏览器支持的 JavaScript 方法
- 卡片 UI 的陷阱 – Dave Rupert 考虑了截断文本的危险