如何禁止HTML表格单元格拆分单词并强制表格宽度自动扩张

解决方案 #

你可以直接在你的页面样式中加入以下CSS规则，即可覆盖全局样式限制，完全满足需求：

/* 表格宽度自适应内容，不受外层容器限制 */
table {
  width: max-content;
  min-width: 100%;
}

/* 单元格仅按空格/单词边界换行，不拆分单词 */
td, th {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: manual !important;
}

效果说明

1. width: max-content 会让表格完全根据内容总宽度自动扩张，不会被移动端屏幕宽度限制，溢出时外层的overflow: scroll会正常触发横向滚动
2. 三个!important规则直接覆盖全局的word-break: break-word设置，所有单词都不会被强制拆分，只会在空格位置换行，不需要设置white-space: nowrap，长文本会在单元格内按你预期的规则自动换行

内容的提问来源于stack exchange，提问作者nayfaan