hanging-punctuation 在移动端完全无效：2026年6月前所有主流移动浏览器均未实现该属性，三大渲染引擎尚未接入其排版逻辑，MDN与CanIUse显示全红，官方标注为低优先级或未计划。
hanging-punctuation 在移动端根本不起作用
直接说结论：hanging-punctuation 在 2026 年 6 月所有主流移动端浏览器（Chrome for Android、Safari on iOS、Firefox for Android、Edge on Android）中均无实现。你写 p { hanging-punctuation: first; }，页面渲染时完全静默忽略——不报错、不警告、也不悬挂任何标点。
这不是配置问题，也不是 CSS 优先级或继承性导致的；根源是 Blink（Android Chrome/Edge）、WebKit（iOS Safari）和 Gecko（Android Firefox）三大渲染引擎至今未接入该属性的排版逻辑。MDN 和 CanIUse 页面仍显示全红，且各浏览器官方 issue 中明确标注为 “low priority” 或 “not planned”。
为什么移动端尤其不能指望它
移动端环境放大了 hanging-punctuation 的不可靠性：
- 字体栈更不稳定：系统字体 fallback 频繁，不同机型字形度量差异大，而该属性依赖精确的字形外延计算
- 视口缩放与 pinch-zoom 会破坏行框边界判断，即使某天部分支持，行为也极难预测
- text-align: justify 在小屏幕常被禁用（避免单词间距拉伸），而该属性多数实现方案要求此前提
- iOS Safari 技术预览版曾短暂支持
first，但仅限 ASCII 引号且未进入正式版；当前 iOS 17.5+ 完全无响应
真正可用的移动端悬挂标点方案
别在 CSS 里硬写 hanging-punctuation，改用可执行、可调试、兼容性明确的方法：
立即学习“前端免费学习笔记（深入）”；
- 用
Typeset预处理 HTML 字符串：它扫描引号（"、'）、句号（.、。）等，自动包裹<span class="hang-first">"</span>，再配几行轻量 CSS —— 支持 iOS 12+、Android Chrome 80+ - 手动控制关键标点：对首段首引号、末段末句号这类确定位置的标点，加
<span class="pull-out">“</span>，CSS 写.pull-out { display: inline-block; margin-left: -0.18em; }（数值按font-family微调） - 中西文混排时放弃自动识别：中文引号（
“”、‘’）需在 Typeset 源码中扩展正则，否则默认只处理英文标点 - 避免组合值陷阱：像
hanging-punctuation: first last;或allow-end这类写法语法合法，但等于白写，还容易让你误判效果已上线
容易被忽略的细节
最常踩的坑不是“怎么写”，而是“以为写了就有用”。很多团队在上线前才发现边缘锯齿严重，回溯时才发现所有 hanging-punctuation 规则从未生效。真实项目里，标点悬挂必须靠 DOM 层干预 + 精细 margin 调整，而不是寄希望于一个十年没落地的 CSS 属性。字体、字号、line-height 的微小变化都会影响 margin-left 的最佳值，所以务必在真机上测 —— 模拟器看不出悬挂是否贴边。
