← 返回 Web 词条Web-webkit-line-clamp原生支持点选数值，样本实时变化
行数截断
在 Web 上叫line-clamp
CSS: line-clamp
官方定义是「允许把一个块的内容限制到指定的行数」。要注意它现在还不是 Baseline，官方标注「在部分最广泛使用的浏览器里不生效」；旧的带前缀写法必须与 display 为 -webkit-box 或 -webkit-inline-box、且 -webkit-box-orient 为 vertical 同时使用 —— 三个属性互相依赖，单写一个不起作用。
限定一段文字最多显示几行，超出的部分收起来不再往下撑。
- 最多显示两行
- 超出的收起来
- 别把卡片撑高
- 行数截断
- 最大行数
- 多行省略
示例
用户带着一句大白话来，拿走三样东西：这个东西在三个平台上分别叫什么；什么时候该用、什么时候不该用、容易跟什么搞混；一段可以直接粘贴给助手的提示词。
-webkit-line-clamp: 2;
其他平台的相似实现
iOS原生支持
lineLimit异名官方描述是「设置文字在这个视图里最多能占多少行」，传 nil 表示不限行。
看 iOS 视角 →Android原生支持
maxLines异名官方措辞是「把文本视图的高度设置为最多这么多行高」—— 它描述的是高度上限，而不是「截断并加省略号」。
看 Android 视角 →使用规范
什么时候用
- 列表或卡片里的摘要必须保持等高时
- 标题长短不一但版面要求整齐时
什么时候别用
- 被截断的内容没有任何展开途径时
- 正文阅读区强行截断，读者拿不到完整信息时