产品与设计 · 排版与视觉样式
文本截断Text Truncate
在固定空间里用三件套或 line-clamp 裁掉溢出文字并以省略号提示，同时保留完整可访问名称与详情入口的内容策略。
截断实验台：让 … 长在标题物件上
同一行产品更新标题，切换截断策略与容器宽度，物件末尾的 …、占行数与裁切边都直接呈现；点「阅读全文」验证视觉截断后全文仍可达。
任务：这是「产品更新」列表的一行，标题很长。切换截断策略与容器宽度，看标题物件末尾的 …、占几行、是否撑破布局；点「阅读全文」验证全文仍可达——当前策略、物件状态徽章和裁切边都长在标题物件上。
容器宽 220px右边界
末端 … 出现。三件套 white-space:nowrap + overflow:hidden + text-overflow:ellipsis 把超出部分裁掉并以 … 提示「还有更多」；原因：是否截断由容器宽度与文字长度共同决定，不是写死字符数。对照：切到「两行截断」看 line-clamp 的多行 …，或切「不截·换行」看布局被撑高。下一步：点「阅读全文」验证全文未丢。
面板里读到的结论
刚才物件上看到的 …、行数与展开结果，对应截断的几条核心机制。
- 单行三件套：white-space:nowrap + overflow:hidden + text-overflow:ellipsis 三条同时写，… 才会出现；漏掉任何一条，要么换行要么硬切。
- 多行 line-clamp：display:-webkit-box + -webkit-box-orient:vertical + -webkit-line-clamp:N + overflow:hidden，让标题最多 N 行，末行 … 收尾。
- 宽度决定截断点：是否出现 … 由容器可用宽度与文字长度共同决定；容器必须有 width/max-width 或父级 min-width:0 约束，否则永远装得下。
- 视觉省略 ≠ 内容丢失：DOM 文本与 aria-label 仍是全文；读屏、复制、展开都拿得到原文。
- 布局稳定：截断用固定行高换整齐；不截换行会让列表行高抖动（与 whitespace、overflow 卡呼应）。
什么时候用截断
看到「固定空间 + 文本可能很长 + 全文不必在同一位置一次读完」时用；错误、价格、操作文案不该只剩 …。
列表标题、卡片标题、文件名、面包屑分段、导航标签——内容可猜，且 hover/详情能拿全文。
错误原因、价格、按钮文案、合同/公告正文——这些丢一截就误导用户，应换行或给独立详情区。
怎么用：从三件套到全文可达
四步把一个长标题截好，并保证全文仍能拿到。
- 给容器约束。固定 width、max-width 或父级 min-width:0，让溢出有地方可裁（与 box-model、flex 卡呼应）。
- 选策略。单行整齐用三件套；允许两行用 line-clamp:N；不能丢信息就别截，改换行或详情页。
- 保留全文。给标题写 aria-label 或 title，并在 hover、tooltip 或详情入口提供原文；展开按钮用 aria-expanded/aria-controls 同步状态。
- 验收。窄屏与宽屏都不撑破布局；键盘能聚焦展开入口；读屏读到完整标题；复制拿到原文。
同一张卡片：截断与不截的对照
目标都是把长标题放进窄卡片。差异只在 CSS 写法与是否保留全文路径。
产品更新 · 标题v3.2 发布：新增实时协作光标与评论分组，修复 Safari 上拖拽失灵阅读全文
单行整齐，… 提示「还有更多」；aria-label 保留完整标题，读屏读到全文；详情入口让鼠标和键盘用户都能拿到原文。
差异：视觉裁了，内容没丢。产品更新 · 标题v3.2 发布：新增实时协作光标与评论分组，修复 Safari 上拖拽失灵
标题末尾被裁，但没有 … 提示，用户以为「…修复 S」就是结尾；又没有 aria-label，读屏只读到可见前缀。看起来完整，其实已丢后半段。
差异：只少一处 ellipsis + aria-label，内容悄悄丢失。快速自测
通知红点里要显示报错「订单 O-2026 扣款失败：余额不足，请充值后重试或联系客服 4001」。该不该用单行 text-truncate 省略？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。