解决单元格撑破布局需组合CSS：设word-break: break-word与overflow-wrap: break-word强制换行，overflow: hidden隐藏溢出，table-layout: fixed配合col宽度约束表格整体。

单元格内容过多撑破布局，本质是表格单元格（<td> 或 <th>）未对溢出内容做约束。表格默认会“自适应”内容宽度，尤其在中文、长单词或未换行文本下极易破坏整体结构。解决关键不是强行缩放，而是用 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;
}

针对单行标题类单元格用省略号

如果单元格只允许显示一行（比如表头或短标题），要避免撑宽又保持可读性，用标准单行截断方案：

Chinese Sensitive Words

中文敏感词/违禁词检测与内容合规性检查工具。支持对小红书（Xiaohongshu）、Douyin（抖音）、WeChat（微信）、Weibo（微博）、Bilibili（哔哩哔哩）、Zhihu（知乎）、Taobao（淘宝）、JD.com（京东）等主流平台的禁用词、限用词及高风险词进行文本扫描与合规性分析。

下载

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

• 固定或最大宽度（width 或 max-width）
• white-space: nowrap 禁止换行
• overflow: hidden 隐藏溢出
• text-overflow: ellipsis 显示省略号

注意：这个组合在 <td> 上直接生效，无需额外 display 变更。

表格整体不被撑破的辅助措施

光设单元格不够，表格本身也得“守规矩”：

• 给 <table> 加 table-layout: fixed，让列宽按设定（如 width 或 col 标签）严格分配，不再随内容伸缩
• 为列设置明确宽度，例如用 <col width="150"> 或 CSS 的 col { width: 150px; }
• 避免在单元格内用 display: inline-block 或浮动等破坏表格流的行为

移动端或响应式场景补充

小屏幕下内容更容易溢出，建议：

• 用 max-width: 100vw 防止单元格超屏
• 媒体查询中降低 font-size 或增加 padding 缓冲空间
• 对超长 URL 类内容，额外加 word-break: break-all（慎用，仅限可信数据）