截断与省略：放不下的文字怎么收尾
列表标题、卡片摘要、面包屑——界面里到处都要「文字太长就截断，末尾画个 …」。单行场景靠 text-overflow: ellipsis，但它 自己不会截断任何东西，必须凑齐 overflow: hidden + white-space: nowrap 三件套；多行场景标准属性长期缺位，事实标准是
-webkit-line-clamp 四件套。本页把每个配方拆成可单独开关的零件，逐项验证「缺一不可」。
1 · 单行省略：text-overflow 三件套，缺一不可
勾掉任意一个 checkbox，观察省略号如何失效：缺 white-space: nowrap 文本直接折行、根本不会在行内溢出；缺 overflow: hidden 溢出内容照常可见，text-overflow 无从生效；缺 text-overflow: ellipsis 则退回默认值 clip，文字被生硬切断、没有省略号。
2 · 多行省略：-webkit-line-clamp 四件套
多行截断长期没有标准方案：标准的 line-clamp(css-overflow-4)落地缓慢，事实标准是 2008 年遗留的 -webkit-line-clamp，而且必须配齐 display: -webkit-box + -webkit-box-orient: vertical +
overflow: hidden 共四件——所有主流浏览器都支持这套组合。拖滑块调行数：
标准化进展。 css-overflow-4 定义了无前缀的 line-clamp，并允许脱离 -webkit-box 这套早期草案 display 值独立工作（line-clamp: 3 单条声明即可）。本页用 CSS.supports('line-clamp', '3') 实测当前浏览器是否已实现——结果见上方 verdict。无前缀的
line-clamp 目前在 Chrome 与 Safari 均仅 preview / 需开旗标（核对于 2026-07）。在它普及之前，四件套写法仍是兼容性最稳的选择。
3 · 经典需求：一行时居中、多行时居左
弹窗提示语的常见规格：文案短（一行）时整体 居中 好看，文案长（多行）时却要 居左 对齐才易读。纯 CSS 有两个经典方案，共同思路都是利用「盒子宽度 随行数变化」：单行时盒子按内容收缩(shrink-to-fit)，可以被居中；多行时盒子被撑满容器宽，内部文本照常左对齐。改下面的 textarea 实时验证：
两个方案的差异。 方案 1 依赖 flex 格式化上下文，flex item 的宽度规则（单行 = max-content 收缩、放不下 = 收缩到可用宽）天然满足需求；方案 2 全靠 inline 布局，inline-block 的 shrink-to-fit 宽度起同样作用，兼容性更古老（IE8 也行）。注意方案 2 中
text-align: center 会被 inline-block 内部继承，所以必须在自身上写回 text-align: left。