为什么Tailwind CSS长英文无法自动换行

长英文不换行是浏览器默认行为，需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几乎必然失效，必须同时满足：

1. max-w-full（或具体值如max-w-md）——给断词提供可比较的宽度边界，否则它无从判断“是否超长”
2. 元素不能是inline显示（比如span），需加block或inline-block
3. 祖先或自身不能带whitespace-nowrap，它会直接压制所有换行逻辑
4. 不能包裹在<pre>、<code>或设了white-space: pre的容器里

break-words vs break-all：选错就毁掉URL可读性

两者视觉效果差异极大，不能混用：

1. break-words：只在必要时断，优先找/、.、-后断，https://api.example.com/v1可能断成两行，但v1完整保留
2. break-all：强制在任意字符间切，filename.pdf可能变成filena-me.pdf，复制粘贴失效
3. 中英文混排时，break-all可能在汉字中间硬切（如“处理”变“处-理”），break-words则避开中文字符内部

Flex/Grid子项里长文本更难换行

这不是break-words的问题，而是布局层锁死了换行机会：

1. Flex子项默认flex-shrink: 1，但若父容器没设min-w-0，浏览器会优先撑宽子项而非折行
2. Grid子项同理，min-w-0是前提，否则列宽被内容强行拉伸
3. 常见错误写法：flex flex-row break-words —— 缺min-w-0，break-words完全不生效
4. 正确组合：flex flex-row min-w-0 break-words（Flex）或grid min-w-0 break-words（Grid）

最常被忽略的细节：断行效果依赖字体渲染。某些等宽字体或自定义字体中，连字符-、下划线_不被视为自然断点，此时break-words不会在这些位置停——得补hyphens-auto或overflow-wrap-anywhere。