正在进入 VibeHub 实训中心…/ 正在加载 AI 实战词典、互动闯关与三分钟配方
文本截断Text Truncate
你可能会说
标题太长就把后面的藏起来，结尾显示省略号。
文本截断是一种在有限空间内隐藏超出文字，并用省略号提示内容未显示完整的显示方式商品卡片标题或表格单元格太长时，可将文本截断并提供完整查看方式。价格、错误提示等关键信息应优先换行，不要只靠文字提示 Tooltip。
你可以这样告诉 AI Agent
请让订单表的商品标题在有限宽度内单行省略，但价格、日期和状态保持完整。为标题提供可聚焦、触屏可用的全文查看或复制入口，并验证 Flex/Grid 下 min-width 与溢出规则生效。
什么时候用
什么时候不用
- 价格、日期、状态等关键信息被截断：用户无法完整获取信息
- 内容截断却没有查看全文的入口：用户无法访问完整信息截断了，点不开也没提示，全文去哪看？
- 正文应换行却使用 nowrap 强制截断：内容会显示不完整
- 单行省略号需要有限或可收缩的宽度，并同时设置溢出隐藏和不换行；Flex 或 Grid 子项还可能需要 min-width: 0只写了 text-overflow: ellipsis 的标题，照样换行溢出三件套缺一不可：overflow + nowrap + ellipsis
组成结构 · Anatomy
限定宽度+nowrap 不换行+overflow 藏溢出=一段很长很长的标题…
容器或 max-width 定下边界，超出的部分才有得截
white-space: nowrap，把文字按在一行里
overflow: hidden，把超出部分先藏起来
text-overflow: ellipsis，在断口处补一个 …
常见变体 · Variants
单行省略Ellipsis
一份名字特别特别长的文件名称-final.pdf
列表标题、文件名一行放不下
多行截断Line Clamp
这是一段卡片摘要，内容再长也只保留前两行，超出的部分由 -webkit-line-clamp 截掉并补上省略号。
卡片摘要保留前两行就够
查看全文Full-text access
2026 年度产品规划与路线图最终确认版本 v32026 年度产品规划与路线图最终确认版本 v3
截断后仍要留全文出口；提示必须能通过键盘触发并有触屏替代
典型使用场景
卡片摘要两行截断
列表与表格的标题列
文件名与长标签
标签：
已发布
可访问的全文入口
延伸阅读 · 权威出处
快速练习