折行与断词：一行放不下了怎么办
浏览器把一行文字塞进版心时，会在「软换行机会(soft wrap opportunity)」处折行：默认只有 空格 和 CJK 字符 之间才算机会。超长英文单词或长 URL 内部没有空格，浏览器找不到机会，内容直接撑破容器 溢出。overflow-wrap、word-break
和 hyphens 这三个属性以不同策略引入额外的断点。
下面这块版心包含一个超长单词、一条长 URL、普通英文句子和一段中文。拖动各控件实时观察折行结果，verdict 区 用真实 getBoundingClientRect() 报告当前行数、是否溢出，以及 getComputedStyle 回显各属性的实际生效值。
1 · overflow-wrap: break-word vs word-break: break-all 的区别
-
overflow-wrap: break-word——「最后手段」策略：浏览器先尝试所有正常断点，只有当 某个词一整行都放不下 时，才去词内部断。普通英文词不受影响，每行只要还有空格可用就按空格折，不会拦腰截断正常词。 -
word-break: break-all——「字符级」策略：任意字符间 都可以作为折行点，不管是否是词边界。切换到这个值再调窄版心：正常英文词也会被拦腰截断，行末不再整词换行。 - 区别总结：
break-word只在长词放不下时才在词内断，普通词不受影响；break-all对所有词一律允许字符级断行。 -
overflow-wrap: anywhere——语义同break-word，区别在于它会影响min-content宽度的计算：长词不再把min-width撑大（Flex/Grid 布局中有时有用）。
white-space 控制的是「允不允许折行」，其他属性控制的是「词内怎么断」。 white-space: nowrap 直接关掉软换行，所有其他属性都无从发挥。pre 只按字面换行符折，pre-wrap 在此基础上允许软换行，pre-line 合并空白但保留换行符。
hyphens: auto 需要两个前提才生效： 其一是元素或祖先有正确的 lang 属性（本页 .tstage 已加 lang="en"）；其二是浏览器内置对应语言的断词字典。满足两者，浏览器会在词的合适音节处插入连字符
- 折行，比在任意字符处截断更易读。hyphens: manual 只在 HTML 实体 ­（软连字符）处断，其他位置不断。若切到 auto 后折行结果无变化，说明当前浏览器或系统缺少该语言的断词字典。
2 · text-wrap: balance——让标题各行宽度更均衡
text-wrap: balance(Chrome 114+, Safari 17.5+)让浏览器重新分配折行点，使各行宽度尽量均衡，避免最后一行只剩一两个孤字。下面两个标题用 getBoundingClientRect() 实测各行宽度，报告「最宽行 − 最窄行」的差值：balance 一侧应更小。balance 是给
标题 / 短文本 的；正文应使用 text-wrap: pretty（见下一节）。
3 · text-wrap: pretty——正文的 rag 与末行孤字
balance 给标题：每行等宽、整块比容器窄，放在正文会显得参差。text-wrap: pretty(Chrome 117+ / Safari 26+)才是给 正文 body text 的——它 保持填满版心宽度，只在末几行的弹性区间内微调折点，做三件事：其一，避免 过短的末行（孤字
orphan）；其二，改善 rag（让右边缘更整齐）；其三，减少 连续行的断字(hyphenation)。实现差异：WebKit 会评估 整段,Chrome 目前只回看 末 4 行。
顺带厘清：text-wrap 是简写，拆成两个 longhand——text-wrap-mode（wrap | nowrap，管「允不允许折行」）+ text-wrap-style（auto | stable | balance | pretty | avoid-short-last-lines，管「怎么折」）。下面两栏是同一段正文，右侧加
text-wrap: pretty，用 Range 实测末行词数，孤字会被标红：
这里把段落宽度 固定在 240px，好让默认折行确定地把末行逼成单个孤字——支持的浏览器下，pretty 一侧会把它拉成两词。能否优化、幅度多大都因浏览器而异：若两栏读数一样，多半是当前浏览器尚未支持 text-wrap: pretty。