hanging-punctuation 在现代浏览器中不能无条件启用，仅 Safari 和 Chrome 125+ 默认支持，Firefox 和旧版 Chrome 完全不识别；必须用 @supports 检测，且仅对块级元素生效，依赖 direction 和 writing-mode；中文实用值为 first 和 last，allow-end 需组合使用且对中文无效；Chrome 125+ 需手动开启实验标志才支持中文标点悬挂。
hanging-punctuation 在现代浏览器中到底能不能用？
不能无条件启用，它目前仅在 Safari（macOS/iOS）和 Chrome 125+（2024年5月起）中默认支持，Firefox 和旧版 Chrome 完全不识别 hanging-punctuation，直接忽略该声明。使用前必须加 @supports 检测，否则在不支持的浏览器里会丢失标点对齐意图，且无降级提示。
常见错误是把它当全局排版开关写在 body 或 p 上——实际它只对块级元素生效，且依赖文本方向（direction: ltr 或 rtl）和书写模式（writing-mode），中文段落若未显式设 direction: ltr，Safari 可能不触发悬挂。
哪些值真正影响中文标点悬挂效果？
中文排版最实用的是 hanging-punctuation: first 和 hanging-punctuation: last，分别让首行开头或末行结尾的标点（如「、」「。」「」」「）」）溢出容器左/右边缘。而 allow-end 或 force-end 在中文语境下基本无效——它们针对西文连字符与断行规则设计，对中文标点无实际作用。
关键细节：
立即学习“前端免费学习笔记（深入）”；
-
first要求段首是标点（如引号开头的引用段落），否则不生效 -
last要求段尾是句号、问号、感叹号或中文右括号类标点，且该行是自然断行结尾（非手动<br>） - 必须配合
text-align: justify或固定宽度容器，否则悬挂视觉不可见
响应式场景下怎么避免换行错乱？
在 max-width 变化频繁的响应式布局中，hanging-punctuation 容易导致标点“消失”或错位，本质是浏览器重排时未同步更新悬挂边界。解决方案不是禁用，而是加一层控制：
用媒体查询分段锁定行为：
@supports (hanging-punctuation: first) {
.quote {
hanging-punctuation: first last;
}
}
<p>@media (max-width: 768px) {
.quote {
/<em> 小屏放弃悬挂，改用 padding 模拟外悬视觉 </em>/
text-indent: -0.2em;
padding-left: 0.2em;
}
}注意：不要对同一元素同时设 text-indent 和 hanging-punctuation，Safari 会优先执行后者并覆盖前者，造成意外缩进。
为什么 hanging-punctuation: allow-end 总不生效？
因为 allow-end 不是独立值，它必须和 first 或 last 组合使用，如 hanging-punctuation: first allow-end。单独写 allow-end 会被解析为无效声明，浏览器静默丢弃。更关键的是：该组合只在西文连字（ligature）或连字符（hyphen）断行时起作用，中文没有 hyphenation 规则，所以即使语法正确，也看不到任何变化。
容易被忽略的一点：Chrome 125+ 支持 hanging-punctuation，但默认关闭了中文标点悬挂逻辑（出于兼容性考虑），需手动开启实验性标志 chrome://flags/#enable-hanging-punctuation-for-cjk 才能让「。」「，」等真正悬挂——这意味着生产环境几乎无法依赖它做核心排版。
