td内写无效，因white-space:normal下浏览器将其视为空格；须配合white-space:pre-line/pre-wrap还原换行，或用overflow-wrap:break-word+word-break:break-word+table-layout:fixed及明确宽度才能可靠换行。
td 里写 <br> 为什么没用？
因为 <td> 默认是块级容器，但它的换行逻辑不认 <code><br> ——除非你显式允许空白符生效。直接往 <td> 里塞 <code><br>，浏览器会把它当普通空格处理（尤其在 white-space: normal 下）。这不是 bug，是 HTML 渲染规则。
实操建议：
- 别依赖
<br>控制单元格内换行，它语义弱、不可控、响应式下容易错位 - 如果后端返回的文本含原始
\n（比如用户评论），前端必须配合white-space: pre-line或pre-wrap才能还原换行 - 想手动插入换行点又不想破坏语义？用
<wbr></wbr>，它是“可断点”，由浏览器决定是否真断，比硬塞<br>更自然
white-space、word-break、overflow-wrap 到底怎么配？
这三个属性常被混用，但职责不同：white-space 控制空格和换行符是否生效；word-break 和 overflow-wrap（旧名 word-wrap）负责长单词或 URL 怎么断。单独设一个，大概率换行还是失效。
推荐组合（兼容现代浏览器）：
-
white-space: normal：让空格、回车符按常规方式解析（即允许自动折行） -
overflow-wrap: break-word：标准属性，强制超长不可分内容（如 URL）在边界处断开 -
word-break: break-word：非标准但广泛支持的值，和上一条协同更稳；避免用break-all，它会在任意字母间断，中文阅读体验差
漏掉任意一个，都可能遇到：中文正常、英文 URL 撑破表格、或整段文字挤成一行。
为什么加了 CSS 还是不换行？关键在宽度
换行不是“开了开关就自动发生”，它需要触发条件：容器必须有明确的宽度约束。如果 <td> 或其父 <code><table> 没设宽，浏览器会优先把内容拉伸铺满，根本不会考虑折行。
<p>必须做的两件事：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li>给 <code><td> 设 <code>max-width（比如 max-width: 200px），比 width 更灵活，容许内容短时收缩
<table> 加 <code>table-layout: fixed，否则列宽由内容撑开，CSS 宽度限制形同虚设
常见错误：只写了 td { overflow-wrap: break-word; }，但没设宽也没 fixed 布局——结果就是“写了等于没写”。
移动端表格换行突然失效？viewport 和缩放是隐形杀手
PC 上好好的换行，一到手机就变横向滚动条，八成不是 CSS 写错了，而是容器被 viewport 缩放或父级弹性布局干扰了实际渲染宽度。
排查重点：
- 确认页面有
<meta name="viewport" content="width=device-width, initial-scale=1">，缺这个，iOS Safari 会默认以 980px 渲染，导致宽度计算失准 - 检查
<table> 父元素是否用了 <code>display: flex或width: fit-content，它们会让表格无视自身table-layout: fixed - 避免用
%或vw给td设max-width，改用px或rem更可控（尤其 iOS）
最隐蔽的坑：某些 UI 框架（如 Ant Design Mobile）会给表格加全局 reset 样式，悄悄覆盖了 white-space 或重置了 table-layout，得用 !important 或更高优先级选择器兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
