行数截断排版

限定一段文字最多显示几行,超出的部分收起来不再往下撑。

  • 最多显示两行
  • 超出的收起来
  • 别把卡片撑高
  • 行数截断
  • 最大行数
  • 多行省略

示例

Web-webkit-line-clamp原生支持点选数值,样本实时变化

用户带着一句大白话来,拿走三样东西:这个东西在三个平台上分别叫什么;什么时候该用、什么时候不该用、容易跟什么搞混;一段可以直接粘贴给助手的提示词。

-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 的提示词

这条词条还没有经过验证的实现提示词。