长英文不换行是浏览器默认行为，需CSS显式控制；break-words仅在容器有明确宽度且内容溢出时生效，须配合max-w-*、block/inline-block、无whitespace-nowrap及非pre/code环境。
长英文不换行不是bug，是浏览器默认行为
浏览器把连续英文字母（如aaaaaaaaaaaaaaaa或https://example.com/very-long-path）当作一个“单词”，而单词内部默认不可断行。中文每个字自带断点，所以天然换行；英文必须靠CSS显式告诉浏览器“这里可以切”。break-words不是开关，而是条件触发器——它只在“容器有明确宽度且内容撑出边界”时才介入。
break-words加了却无效的四个硬性前提
单独写break-words几乎必然失效，必须同时满足：
-
max-w-full（或具体值如max-w-md）——给断词提供可比较的宽度边界，否则它无从判断“是否超长” - 元素不能是
inline显示（比如span），需加block或inline-block - 祖先或自身不能带
whitespace-nowrap，它会直接压制所有换行逻辑 - 不能包裹在
<pre class="brush:php;toolbar:false;"></pre>、<code>或设了white-space: pre的容器里
break-words vs break-all：选错就毁掉URL可读性
两者视觉效果差异极大，不能混用：
-
break-words：只在必要时断，优先找/、.、-后断，https://api.example.com/v1可能断成两行，但v1完整保留 -
break-all：强制在任意字符间切，filename.pdf可能变成filena-me.pdf，复制粘贴失效 - 中英文混排时，
break-all可能在汉字中间硬切（如“处理”变“处-理”），break-words则避开中文字符内部
Flex/Grid子项里长文本更难换行
这不是break-words的问题，而是布局层锁死了换行机会：
立即学习“前端免费学习笔记（深入）”；
- Flex子项默认
flex-shrink: 1，但若父容器没设min-w-0，浏览器会优先撑宽子项而非折行 - Grid子项同理，
min-w-0是前提，否则列宽被内容强行拉伸 - 常见错误写法：
flex flex-row break-words—— 缺min-w-0，break-words完全不生效 - 正确组合：
flex flex-row min-w-0 break-words（Flex）或grid min-w-0 break-words（Grid）
最常被忽略的细节：断行效果依赖字体渲染。某些等宽字体或自定义字体中，连字符-、下划线_不被视为自然断点，此时break-words不会在这些位置停——得补hyphens-auto或overflow-wrap-anywhere。
