表格布局崩坏的根源在于未设table-layout: fixed，需配合td的max-width与break-word类属性控制换行，pre-wrap处理换行符，ellipsis需包裹div并满足四条件，多列时优先水平滚动。

表格里塞长段落，直接换行就崩布局？

表格单元格默认会按内容撑开列宽，尤其遇到大段落（含空格、换行符），white-space: normal虽能折行，但若列宽没约束，整张表会被拉得歪斜甚至横向溢出。这不是内容问题，是表格布局机制在“护短”。

真正要做的不是压制文字，而是给容器划边界：

• table 必须设 table-layout: fixed，否则 max-width 在 td 上形同虚设
• td 设 max-width: 300px（或百分比），别用 width —— 响应式下更可控
• 段落内容外层不加 div 也行，但必须配 word-wrap: break-word 或 overflow-wrap: break-word
• 如果段落里混有 URL 或 UUID 这类无空格字符串，单靠 break-word 可能断得生硬，得补一句 word-break: break-word（注意不是 break-all）

想保留原文换行符，又不让表格被撑爆？

用户粘贴的带回车的文本（比如日志、评论），直接丢进 td 会塌成一行——浏览器把 \n 当空格处理了。这时 white-space: pre-wrap 是唯一解，但它和 text-overflow: ellipsis 冲突，不能共存。

实操要点：

立即学习“前端免费学习笔记（深入）”；

Pptx To Html

使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。

下载

• td 上直接设 white-space: pre-wrap，不用套 div
• 必须同步设 max-width，否则长行仍会横向溢出
• 禁用 white-space: nowrap —— 很多 UI 框架默认加它，一加就全废
• 若需控制首行缩进，用 text-indent，别靠   或手动空格

既要省略号，又要单行紧凑显示？

适合路径、ID、简短描述这类字段，但对大段落基本不适用——text-overflow: ellipsis 强制单行，长段落截掉后信息量归零。

真要用，四条件缺一不可：

• table 元素上写 table-layout: fixed
• td 设 max-width: 200px
• td 内部必须包裹 div，且该 div 有：display: block、white-space: nowrap、overflow: hidden、text-overflow: ellipsis
• 若表格在外层是 Flex 容器，td 还得加 min-width: 0，否则 Flex 的默认 min-width: auto 会绕过截断

整表内容太多，横向滚动比硬压缩更合理

当列数多、每列又都要展示完整段落时，强行压缩只会让文字小到看不清。与其牺牲可读性，不如允许水平滚动。

关键动作就两步：

• 用 div 包住整个 table，设 overflow-x: auto 和明确宽度（如 width: 100%）
• table 自身不要设 width: 100% —— 它会反向拉伸所有列，破坏 max-width 控制
• 移动端加 touch-action: pan-x 提升滑动手感，iOS Safari 尤其需要

最常被漏掉的是 table-layout: fixed 必须写在 <table> 标签上，而不是 <td>；很多人调半天无效，就卡在这一步。