Bootstrap表格单元格长文本自动换行 防止表格超出页面视口

核心原因：Bootstrap默认表格采用table-layout: auto布局规则，列宽会随单元格内容长度自适应，遇到超长文本（尤其是无空格连续字符）时会持续撑宽单元格，最终导致整个表格溢出页面视口。 #

方案1：原生类实现（推荐，无需冗余自定义代码） #

• 第一步：给表格外层套响应式容器做兜底，避免极端场景下布局崩坏
• 第二步：给表格设置固定布局模式，让列宽不受内容长度支配
• 第三步：给单元格开启文本换行，长连续字符配置强制断词

Bootstrap 5 直接用内置类即可，代码示例：

<div class="table-responsive">
  <!-- table-fixed 开启固定表格布局，w-100 让表格撑满容器宽度 -->
  <table class="table table-fixed w-100">
    <thead>
      <tr>
        <th scope="col">产品ID</th>
        <th scope="col">产品详情</th>
        <th scope="col">库存数量</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>10086</td>
        <!-- text-wrap 开启自动换行，text-break 处理无空格连续长文本强制断行 -->
        <td class="text-wrap text-break">
          此处为从数据库读取的超长产品描述文本，哪怕是连续无分隔的长串编码、链接类内容，也会在单元格边界自动折行，不会横向撑宽表格
        </td>
        <td>329</td>
      </tr>
    </tbody>
  </table>
</div>

如果是Bootstrap 4版本，没有内置table-fixed类，追加一行自定义CSS即可，其余类名通用：

.table-fixed {
  table-layout: fixed;
  width: 100%;
}

常见配置避坑 #

• 检查单元格、表格是否误加了text-nowrap类，该类会强制文本不换行，是导致表格被撑宽的高频误操作
• 配置table-layout: fixed时必须同步给表格设置width:100%，否则列宽分配会出现异常
• 不建议直接给全局单元格写死固定宽度，用固定布局+响应式容器的方案适配性更强，能兼容不同屏幕尺寸

异常效果参考：
长文本撑宽表格异常展示

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