标点避头需 white-space: normal + word-break: normal 组合，禁用 break-all；表格中须 table-layout: fixed 并设显式宽度；破折号等特殊标点需零宽空格或 inline-block 隔离。
标点出现在行首？先关掉 word-break: break-all
中文排版里，逗号、句号、问号、感叹号、上引号、左括号这些都属于「避头标点」，按规范不能出现在行首；同理，下引号、右括号是「避尾标点」，不能在行尾。但很多开发者一加 word-break: break-all 就全乱了——它会无视标点语义，在任意字符间硬切，导致句号孤零零挂在新行开头。
真正起作用的是：word-break: normal。它尊重中文换行规则：允许在字间断开，但避开避头/避尾标点。实测中，只要删掉 break-all，换成 normal，90% 的行首标点问题就消失了。
- 别混用
text-align: justify和word-break: break-all，后者会覆盖前者的排版意图 - 如果用了英文标点（比如英文句号
.或引号"），浏览器不识别其避头属性，仍可能出错；统一用中文标点更稳妥 -
word-break: keep-all虽然禁止断词，但对中文标点避头没额外帮助，且会让长英文单词溢出容器
white-space 设成 normal 才能触发标点避头逻辑
标点避头不是独立功能，它依赖浏览器对文本流的默认解析逻辑。一旦把 white-space 设成 pre、pre-wrap 或 nowrap，就等于告诉浏览器：“别按常规断行”，避头规则也就失效了。
所以，确保文本容器的 white-space 是 normal（这也是默认值）。如果你之前为了保留用户输入的换行符而用了 pre-wrap，那避头标点大概率会失守——这时得权衡：要么改用后端预处理换行符为 <br>，要么接受标点偶尔跑位。
立即学习“前端免费学习笔记（深入）”；
-
white-space: normal+word-break: normal是标点避头的黄金组合 -
white-space: pre-line会合并空白但保留换行，同样绕过避头机制 - 表格单元格（
<td>）里若套了<div>且设了white-space: pre-wrap，父级td的避头设置会被忽略
破折号和省略号要特别留意
中文破折号（——）是个特例：它内部绝不换行，但不同浏览器对其前后是否允许断行处理不一致。Chrome 和 Safari 基本遵循「前后都可断」，Firefox 有时会把它和前后字粘成一块，导致整段撑宽。省略号（…）同理，三个点被视为一个原子单位，不会从中切断，但若紧挨着避头标点（比如「……，」），那个逗号仍可能被推到下行开头。
目前没有纯 CSS 方案能强制破折号参与避头，最稳的办法是人工干预：在破折号前加零宽空格 ，或用 <span> 包裹并设 display: inline-block 隔离换行上下文。
- 避免连续使用多个破折号（如「————」），这会加剧渲染差异
-
text-overflow: ellipsis只作用于单行，与多行避头无关；多行截断靠-webkit-line-clamp，但它不控制标点位置 - 服务端输出时，可提前用正则把「，——」「。——」这类组合替换成「，
——」「。 ——」， <wbr>提供合法换行点又不破坏标点归属
表格里标点避头经常失效，原因不在 CSS
在 <table> 中，即使给 <td> 加了 word-break: normal，标点还是跑到行首——问题往往出在表格布局本身。默认 table-layout: auto 下，列宽由内容撑开，浏览器根本不确定“一行该多宽”，避头规则无从判断边界。
必须三步一起做：table-layout: fixed + 给 <td> 设显式 width（像素或百分比）+ 确保 white-space: normal。漏掉任一环，避头就形同虚设。
- 用
<col>定义列宽时，必须配合table-layout: fixed，否则无效 -
<td nowrap>属性会覆盖word-break，且无法触发避头逻辑，纯属误导 - 如果
<td>里嵌了<p>或<div>，避头只作用于该块级元素内部，对外层td无意义
white-space 和 word-break 是否真被应用，而不是只看源码写了什么。 
