table单元格内tag标签超出宽度，如何实现完整标签自动换行不拆分

解决方案 #

问题核心是当前标签的display属性设置错误，同时缺少表格列宽约束和换行规则配置，按以下步骤修改即可：

1. 调整表格基础布局，避免列宽被内容撑爆
   给你的表格添加如下CSS，强制表格按设定的列宽渲染，不会随内容自动拉伸：

table {
  table-layout: fixed;
  width: 100%; /* 可根据实际需求调整表格总宽度 */
}

2. 修改标签样式，保证标签作为整体不拆分
   把标签的display从block改为inline-block，同时添加强制标签内部不换行的规则：

span.tag {
  display: inline-block; /* 支持横向排列，同时保留padding、margin设置 */
  background-color: #3d3d3d;
  padding: 1px 8px;
  line-height: 23px;
  margin: 0 8px 4px 0; /* 增加下间距，换行后标签垂直方向不会贴在一起 */
  white-space: nowrap; /* 单个标签内部文字强制不换行，保证标签完整性 */
}

3. 给存放标签的单元格配置换行规则
   给渲染CustomTagsCell组件的td元素添加如下CSS，允许内容自动换行：

td {
  white-space: normal;
  word-wrap: normal;
}

如果希望更灵活的控制标签间距，也可以给标签列表加一层flex包裹容器，修改后的React组件如下：

export class CustomTagsCell extends React.Component {
  render() {
    return (
      <div style={{display: "flex", flexWrap: "wrap", gap: "4px 8px"}}>
        {this.props.tags &&
          this.props.tags.map((tag, i) => {
            return (
              <span className="tag" key={i}>
                {tag}
              </span>
            );
          })}
      </div>
    );
  }
}

以上修改完成后，标签会以完整个体为单位自动换行，不会拆分内容，也不会超出表格边界。

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