解决单元格撑破布局需组合CSS：设word-break: break-word与overflow-wrap: break-word强制换行，overflow: hidden隐藏溢出，table-layout: fixed配合col宽度约束表格整体。
单元格内容过多撑破布局，本质是表格单元格（ 单纯设 示例样式： 如果单元格只允许显示一行（比如表头或短标题），要避免撑宽又保持可读性，用标准单行截断方案： 立即学习“前端免费学习笔记（深入）”； 注意：这个组合在 光设单元格不够，表格本身也得“守规矩”： 小屏幕下内容更容易溢出，建议： 或 ）未对溢出内容做约束。表格默认会“自适应”内容宽度，尤其在中文、长单词或未换行文本下极易破坏整体结构。解决关键不是强行缩放，而是用 CSS 明确控制溢出行为和换行逻辑。
给单元格加 overflow 和换行规则
overflow: hidden 不够——表格单元格默认 white-space: normal，但某些内容（如连续英文、URL、无空格中文长串）仍可能不折行而横向撑开。必须组合使用：
word-break: break-word 或 overflow-wrap: break-word，让长单词/URL在容器边界处断开overflow: hidden（隐藏超出部分）或 overflow: auto（出现横向滚动条）max-height + display: -webkit-box 实现多行省略.table-cell {
word-break: break-word;
overflow-wrap: break-word;
overflow: hidden;
max-width: 200px;
white-space: normal;
}
针对单行标题类单元格用省略号
width 或 max-width）white-space: nowrap 禁止换行overflow: hidden 隐藏溢出text-overflow: ellipsis 显示省略号 上直接生效，无需额外 display 变更。
表格整体不被撑破的辅助措施
加
table-layout: fixed，让列宽按设定（如 width 或 col 标签）严格分配，不再随内容伸缩
col { width: 150px; }
display: inline-block 或浮动等破坏表格流的行为移动端或响应式场景补充
max-width: 100vw 防止单元格超屏font-size 或增加 padding 缓冲空间word-break: break-all（慎用，仅限可信数据）
