英文单词不换行是因浏览器将连续字母视为不可分割单元，需配合固定表格布局、max-width约束及overflow-wrap: break-word等css组合才能正确折行。

为什么英文单词在里不换行

不是浏览器“故意不换行”，而是它把连续英文字符（比如 abcdefghijklmnopqrstuvwxyz）当成一个不可分割的单词，而默认的 white-space: normal 只会在空格或标点处折行。中文每个字天然可断，英文却要靠空格或显式断点触发换行。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

必须设宽度 + table-layout: fixed

光写 word-break 或 overflow-wrap 没用——如果 <table> 没固定宽度、<code><td> 没约束尺寸，浏览器会优先把列撑开，根本不会尝试折行。 <ul><li>给 <code><table> 加 <code>style="table-layout: fixed; width: 300px;"

给 <td> 加 <code>style="max-width: 200px;"（比列宽略小更稳妥）

避免只设 width，用 max-width 允许内容短时收缩

选对 CSS 组合：overflow-wrap + word-break

word-break: break-all 会把 hello 切成 hel 和 lo，破坏可读性；overflow-wrap: break-word 才是兼顾语义和布局的解法——它只在必要时（超长 URL、哈希值）才断词，普通英文仍保完整。

• 推荐组合：white-space: normal; overflow-wrap: break-word; word-break: normal;
• 别混用 word-break: break-all 和 overflow-wrap: break-word，后者已含断词逻辑，前者会覆盖并激进切分
• 若后端返回带原始 \n 的文本（如用户评论），需额外加 white-space: pre-line 还原换行

Flex/Grid 容器里嵌套表格也得小心

如果 <td> 被包在 <code>display: flex 或 display: grid 的父容器中，即使 CSS 全写了，也可能不换行——因为 flex item 默认 flex-shrink: 1 失效，容器强行拉伸子项。

• 给包裹 <td> 的直接父元素加 <code>min-width: 0（flex 场景）
• 或加 overflow: hidden，强制触发换行计算
• Grid 子项同理，不能只依赖 overflow-wrap
真正卡住的点从来不是“该用哪个属性”，而是宽度没约束、布局模式没配对、父容器干扰了换行触发条件。这些地方漏一个，前面所有 CSS 都白写。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！