行数截断排版
限定一段文字最多显示几行,超出的部分收起来不再往下撑。
- 最多显示两行
- 超出的收起来
- 别把卡片撑高
- 行数截断
- 最大行数
- 多行省略
示例
用户带着一句大白话来,拿走三样东西:这个东西在三个平台上分别叫什么;什么时候该用、什么时候不该用、容易跟什么搞混;一段可以直接粘贴给助手的提示词。
-webkit-line-clamp: 2;
Web / iOS / Android 对照
Web原生支持
平台通用范围
line-clamp
也叫 -webkit-line-clamp
CSS: line-clamp
官方定义是「允许把一个块的内容限制到指定的行数」。要注意它现在还不是 Baseline,官方标注「在部分最广泛使用的浏览器里不生效」;旧的带前缀写法必须与 display 为 -webkit-box 或 -webkit-inline-box、且 -webkit-box-orient 为 vertical 同时使用 —— 三个属性互相依赖,单写一个不起作用。
iOS原生支持
平台通用范围
lineLimit
也叫 lineLimit(_:)
SwiftUI: View.lineLimit(_:)
官方描述是「设置文字在这个视图里最多能占多少行」,传 nil 表示不限行。有一点容易被忽略:官方说明这个限制「作用于层级内的所有文字实例」—— 加在容器上会一并影响里面每一段文字,不是只管一处。
Android原生支持
平台通用范围
maxLines
Android View: TextView.setMaxLines(int)
官方措辞是「把文本视图的高度设置为最多这么多行高」—— 它描述的是高度上限,而不是「截断并加省略号」。省略号是另一个设置(ellipsize / TextOverflow)的事,两者要一起配才得到常见的那种效果。
使用规范
什么时候用
- 列表或卡片里的摘要必须保持等高时
- 标题长短不一但版面要求整齐时
什么时候别用
- 被截断的内容没有任何展开途径时
- 正文阅读区强行截断,读者拿不到完整信息时
容易混淆
给 AI 的提示词
这条词条还没有经过验证的实现提示词。