font-kerning 控制字偶距启用与否，仅影响特定字符对间距，与文本截断无关；实现单行截断需 overflow: hidden、white-space: nowrap、text-overflow: ellipsis 三者配合。
font-kerning 是什么，它根本不能“克切”文本
font-kerning 控制的是字偶距（kerning）的启用与否，也就是特定字符对（比如 “AV”、“To”）之间的微调间距。它不负责截断、省略、裁剪或任何意义上的“克切”。如果你搜的是“文本克切”，实际想找的大概率是 text-overflow + white-space + overflow 这套组合——font-kerning 在这里完全不相关，强行用它只会白忙活。
真正实现单行文本截断并显示省略号
这是最常见需求：容器宽度固定，文本超长时显示 ...。关键不是调间距，而是让浏览器“主动放弃渲染超出部分”。
- 必须同时设置三个 CSS 属性：
overflow: hidden、white-space: nowrap、text-overflow: ellipsis -
text-overflow: ellipsis单独写无效，它只在块级元素且内容被overflow: hidden截断时才生效 - 如果父容器是
display: flex，子元素需加min-width: 0防止 flex 项目默认不收缩导致截断失效 - 示例：
.truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
多行文本省略（-webkit-line-clamp）的兼容性坑
想截两行或三行并加 ...？-webkit-line-clamp 是目前唯一实用方案，但它有硬伤：
- 仅 Chrome/Safari/Edge 支持，Firefox 完全不认；没有标准替代方案，polyfill 不可靠
- 必须配合
display: -webkit-box和-webkit-box-orient: vertical，缺一不可 - 高度不能写死为
px，得靠行高 × 行数估算，否则可能多出空白或截不干净 - 如果文本含换行符
\n或内联元素（如<span></span>），行为不可控，建议先 normalize 内容
别碰 font-kerning 除非你真在调字体细节
font-kerning 的取值只有 auto、normal、none。现代字体大多自带 kerning 表，设 auto 就够了；设 none 只会让 “AV” 这类组合显得松散难读，对布局、截断、响应式毫无帮助。
立即学习“前端免费学习笔记（深入）”；
- 它不影响
text-overflow行为，也不改变元素盒模型尺寸 - 字体加载期间若 fallback 字体无 kerning 表，可能出现短暂文字跳动，但这和“克切”无关
- 真要微调字间距，该用
letter-spacing（全局等距）或text-rendering: optimizeLegibility（触发更精细的字体渲染）
“克切”本质是布局控制问题，不是字体渲染问题。把力气花在 overflow 和 white-space 上，比折腾 font-kerning 实在得多。
