ViboDesign
调感觉

文本截断

Truncation

如果你管它叫……
后面带省略号的字只显示两行文字太长就截掉标题省略号收口的长文案
LIVE DEMO真实可交互,动手试试

这是一段很长很长的标题文案,用来展示两行截断之后尾部如何自动出现省略号。

https://vibodesign.app/docs/really-long-slug-for-preview

英文名
Truncation
别名 · 俗称
省略号超长文字收口Line Clamp截一半
Web 叫法
Truncation / Line Clamp
大白话定义
内容太长放不下时,用省略号或行数限制把它收住,避免把卡片或列表撑坏。
部位拆解
  • 单行截断 Ellipsis超出一行时尾部显示 ...
  • 多行截断 Line Clamp限制最多显示几行
  • 完整内容 Full Text悬停、展开或详情页里可看全
提示词
Web

把卡片标题做成 2 行截断(line-clamp-2),超出显示省略号,悬停时用 tooltip 展示完整文案

调试 Prompt

调试我的文本截断(Truncation)。逐一排除:容器没设固定宽度,结果根本不触发截断;只加了 line-clamp 但缺完整文案入口;中英文混排时断行很奇怪;移动端字号变大后两行截断高度没跟着调整。症状是:

文本截断 Truncation 是什么?UI 视觉词典 · ViboDesign