文本截断Text Truncate
样式与布局基础用省略号收起放不下的文字
文本截断适合空间有限的列表和卡片，可以限制为一行或多行。它会隐藏信息，关键内容尽量不要截断；确实需要时，要提供查看完整内容的可靠方式。
2026 年度产品规划与路线图最终确认版本 v3
本次规划围绕「让新手第一周就做出自己的页面」展开，包含课程体系重构、实战项目升级与社群运营三条主线，具体排期见附录。
设计系统组件覆盖率审计报告（对外发布版）
对现有 42 个组件逐一核查覆盖情况，标记高频缺漏并给出补齐优先级建议，供下季度排期参考。
什么时候用
- 卡片 Card 摘要截断：多行 clamp 保留前两三行，卡片整齐划一2026 年度产品规划与路线图最终确认版本本次规划围绕课程体系重构、实战项目升级与社群运营三条主线展开，具体排期与负责人见附录详情。标题一行省略，摘要两行截断
- 标题可单行省略，但要留查看全名的入口
- 文件名、长 标签 Tag：不适合换行的短文本截成一行这是一个文案特别长的标签示例
- 截断必配全文出口：悬停 文字提示 Tooltip 展示完整内容2026-年度产品规划-final-v3-最终版.sketch 2026-年度产品规划-final-v3…
什么时候不用
- 价格、日期、状态等关键信息被截掉：等于没展示金额和日期被截，关键信息等于没写
- 截断了却没有看全文的入口：用户只能干着急截断了，点不开也没提示，全文去哪看？
- 正文该换行却用 nowrap 硬截：话只说半句就没了
- 单行省略号还需要同时设置溢出隐藏和不换行只写了 text-overflow: ellipsis 的标题，照样换行溢出三件套缺一不可：overflow + nowrap + ellipsis
组成结构 · Anatomy
限定宽度+nowrap 不换行+overflow 藏溢出=一段很长很长的标题…
1限定宽度Width容器或 max-width 定下边界，超出的部分才有得截
2不换行white-spacewhite-space: nowrap，把文字按在一行里
3溢出隐藏overflowoverflow: hidden，把超出部分先藏起来
4省略号text-overflowtext-overflow: ellipsis，在断口处补一个 …
常见变体 · Variants
单行省略Ellipsis
一份名字特别特别长的文件名称-final.pdf
列表标题、文件名一行放不下
多行截断Line Clamp
这是一段卡片摘要，内容再长也只保留前两行，超出的部分由 -webkit-line-clamp 截掉并补上省略号。
卡片摘要保留前两行就够
悬停看全文With Tooltip
2026 年度产品规划与路线图最终确认版本 v32026 年度产品规划与路线图最终确认版本 v3
截断后仍要留全文出口时
典型使用场景
卡片摘要两行截断
列表与表格的标题列
文件名与长标签
标签：
已发布
悬停提示展示全文