如何让Bootstrap表格中链接列数据自动换行并遵守列宽设置

问题根源在于连续无空白的字符（比如你示例里的逗号分隔数字串）会触发浏览器默认的不换行行为，加上Bootstrap表格默认布局会随内容撑开列宽，导致设置的width属性失效。

直接用以下方法解决：

1. 添加自定义CSS样式 #

给表格或目标单元格设置强制换行和固定布局的样式：

/* 让固定布局表格的单元格强制换行 */
.table-fixed td {
  table-layout: fixed;
  word-break: break-all;
}

• table-layout: fixed：强制表格严格遵循设置的列宽，不会被内容撑开。
• word-break: break-all：允许在任意字符位置换行，完美适配连续无空格的内容。

2. 修改后的完整代码示例 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.table-fixed td {
  table-layout: fixed;
  word-break: break-all;
}
</style>
<div class="container">
  <table class="table table-fixed table-striped table-hover table-bordered">
    <thead>
      <th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th>
    </thead>
    <tbody>
      <tr>
        <td width="50px"><a href="#">12,45,78,65,45,78,21,54,98,87,5,21,64,87,54,21,87,54,54,54,21,54,87,21,54,</a></td>
        <td>1</td><td>2</td><td>43</td><td>6</td><td>dfgh</td><td>dfg</td><td>dfg</td><td>sadf</td><td>fgj</td><td>sdf</td><td>sdf</td>
      </tr>
    </tbody>
  </table>
</div>

如果只想针对某一列生效，可以给该列的td加自定义类，比如text-break-column，然后修改CSS：

.text-break-column {
  word-break: break-all;
}

对应单元格代码改成：<td width="50px" class="text-break-column">...</td>，这样更灵活。

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