CSS hanging-punctuation 怎样处理行首行尾标点悬挂

如果中文段落的开头总像多出一个全角引号，或者末行的句号让右边界显得不齐，可以先试试 hanging-punctuation。它控制标点是否允许悬挂到行框外侧，不会删除字符，也不会改变文本本身。最常用的写法是 hanging-punctuation: first allow-end last;，但这项能力目前并不是所有主流浏览器都完整支持。

官方资料：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/hanging-punctuation

先按标点出现的位置选择关键字：首行开标点看 first，末行闭标点看 last，行尾逗号和句号再考虑 allow-end。把它当成排版增强能力，核心内容仍要在未悬挂时保持可读。

先判断要悬挂的标点位置

排查时我会先把问题拆成三类，而不是直接把三个关键字全部写上。first 面向元素第一个格式化行开头的开括号或引号；中文文章里常见的是“（”“「”和开引号。last 面向元素最后一个格式化行末尾的闭括号或引号，例如“）”“」”或闭引号。

allow-end 处理的是另一组情况：当逗号、句号等行尾标点在当前排版条件下不适合继续占据行内宽度时，允许它们悬挂。它不是“把所有标点都推到外面”，所以先确认你看到的是哪一类边界。

用关键字组合设置 hanging-punctuation

确认需求后，把属性写在段落或文章正文容器上即可。下面的组合覆盖了较完整的中文正文场景；如果只想处理引用符号，使用 first last 会更收敛。

.article-copy {
  /* 允许首行开标点、末行闭标点和符合条件的行尾标点悬挂 */
  hanging-punctuation: first allow-end last;
}

.quote-copy {
  /* 引用块只处理两端的引号或括号，不主动处理句末标点 */
  hanging-punctuation: first last;
}

关键字之间用空格分隔，顺序不是重点。初始值是 none，也可以显式关闭悬挂。属性适用于所有元素并且会继承，因此更稳妥的做法是把它限制在正文容器，而不是随手放在全局通配选择器上。

为什么写了属性仍然看不到变化

第一种可能是浏览器实现还没有支持你需要的值。MDN 将该属性标记为 Limited availability，并说明它还不是 Baseline；因此不能只在一个浏览器里看到效果，就把它当成所有用户都能得到的排版结果。

第二种可能是观察位置不对。first 看的是元素第一个格式化行，last 看的是最后一个格式化行，并不是每一行的开头和结尾。段落宽度、字体、换行结果改变后，标点是否正好落在受影响的位置也会改变。allow-end 也不是无条件移动句号，只有在实现判断该标点可以悬挂的排版条件下才会出现差异。

第三种可能是测试文本太短。可以准备一个包含开括号、闭括号、中文逗号和句号的多行段落，分别切换 none、first last 与 first allow-end last，再观察左右边界；这只是排版观察，不要把静态说明图当作浏览器运行截图。

把兼容性与退化方案放在一起

悬挂效果消失时，正常的行内排版仍然应该成立。可以用特性查询把增强写法包起来，同时给旧环境保留默认值：

.article-copy {
  /* 默认不依赖悬挂能力，保证旧环境仍有正常正文 */
  hanging-punctuation: none;
}

@supports (hanging-punctuation: first) {
  .article-copy {
    /* 新环境再启用正文两端的标点悬挂 */
    hanging-punctuation: first allow-end last;
  }
}

这类增强不适合承载信息含义，也不应该用负 margin 复制一个“假悬挂”来替代它：负 margin 可能影响选择、换行和响应式宽度。若项目必须在多个浏览器中保持完全一致，更可靠的办法是接受普通标点边界，或者选择项目已经验证过的字体与排版方案。

常见问题

只想让开头的左引号悬挂，怎么写？ 在正文容器上使用 hanging-punctuation: first;，不要额外加入 last 或 allow-end。

为什么设置了 first，段落中间每行的括号没有变化？ 因为 first 针对元素的第一个格式化行开头，不是每一行的行首；末行闭标点则对应 last。

这个属性会改变 HTML 文本或复制结果吗？ 不会。它只影响排版时标点与行框的视觉关系，字符仍然属于原来的文本。

总结来说，先按位置选择 first、last 和 allow-end，再用多行中文样本观察真实布局。由于浏览器支持并不完整，把 hanging-punctuation 作为渐进增强，才能让正文在没有悬挂效果时仍然可靠。