text-box-trim 目前未被任何主流浏览器支持，仍处于 css text decoration level 4 草案阶段；实际开发中需用 flex、transform 或 vertical-align 等方案替代。
text-box-trim 在当前浏览器中基本不可用
直接告诉你结论：text-box-trim 和 text-box-edge 这两个属性目前（2026年5月）**没有被任何主流浏览器实现**，Chrome、Firefox、Safari、Edge 均不支持。你写上去不会报错，但也不会产生任何效果——它仍处于 CSS Text Decoration Level 4 的草案阶段，连实验性前缀都没有。
为什么你会看到 text-box 相关资料
部分设计系统文档或未来向 CSS 规范预览稿里提到了 text-box 作为缩写属性，但它依赖的底层机制尚未落地。你查到的语法说明（比如 trim-both、text alphabetic）是规范草案里的定义，不是可用 API。
- MDN 上目前对
text-box-trim标记为 “No support” - CanIUse 没有收录该属性
- 所有已知的线上 demo 都是静态示意图或伪造的 JS 模拟
替代方案：真正能去除半行距的实用方法
要解决“文字上下多出半行空白、无法精确贴顶/贴底/垂直居中”的问题，得绕过 line-height 的固有行为，用更可控的布局模型：
- 对单行文本：用
display: flex+align-items: center，配合line-height: 1或line-height: normal，再微调padding-top/padding-bottom - 对图标+文字组合：把文字设为
display: inline-flex或包裹在span里，用vertical-align: middle+ 调整父容器font-size和line-height比例 - 对需要像素级控制的场景：用
transform: translateY()手动偏移，例如transform: translateY(-2px)抵消顶部空隙（需结合实际字体度量测试） - 避免用
line-height控制高度：改用height+flex或grid容器约束，让内容在里面自由对齐
容易被忽略的关键点
很多人试了 line-height: 1 发现还是没贴顶——那是因为字体本身的 ascent 和 descent 度量线决定了文字在行框内的实际占位，CSS 并不暴露这些底层度量。所谓“半行距”本质是浏览器按字体指标自动分配的空白，text-box 想解决的就是这个，但它还没来。现在能做的，只有换布局模型、换对齐策略，或者接受微小视觉误差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
