调感觉
文本截断
Truncation
「后面带省略号的字」「只显示两行文字」「太长就截掉」「标题省略号」「收口的长文案」
LIVE DEMO真实可交互,动手试试
这是一段很长很长的标题文案,用来展示两行截断之后尾部如何自动出现省略号。
https://vibodesign.app/docs/really-long-slug-for-preview
- 英文名
- Truncation
- 别名 · 俗称
- 省略号超长文字收口Line Clamp截一半
- Web 叫法
- Truncation / Line Clamp
- 大白话定义
- 内容太长放不下时,用省略号或行数限制把它收住,避免把卡片或列表撑坏。
- 部位拆解
- 单行截断 Ellipsis超出一行时尾部显示 ...
- 多行截断 Line Clamp限制最多显示几行
- 完整内容 Full Text悬停、展开或详情页里可看全
提示词已按当前平台组织好,复制粘贴给 AI 即可
Web
把卡片标题做成 2 行截断(line-clamp-2),超出显示省略号,悬停时用 tooltip 展示完整文案
调试 Prompt组件不听话时用——把症状补在末尾一起发给 AI
调试我的文本截断(Truncation)。逐一排除:容器没设固定宽度,结果根本不触发截断;只加了 line-clamp 但缺完整文案入口;中英文混排时断行很奇怪;移动端字号变大后两行截断高度没跟着调整。症状是: