如何在Material UI表格单元格中实现含下划线长字符串的正常换行？

问题原因 #

浏览器默认不会将下划线_识别为合法的断词点，整段下划线连接的字符串会被判定为单个单词，而短横线-属于默认断词点，所以两者换行表现不一致。你之前使用的wordBreak: break-all会强制在任意字符处截断，wordWrap: break-word仅会在整词超出容器时才断行，都无法实现仅在下划线位置断行的需求。

可行方案 #

方案1：CSS样式适配（无需修改原数据，适配现代浏览器） #

直接给TableCell组件添加如下样式即可：

// MUI v5 及以上版本使用sx属性示例
<TableCell
  sx={{
    maxWidth: '200px', // 按需设置单元格最大宽度
    overflowWrap: 'break-word',
    lineBreak: 'loose'
  }}
>
  word_word_word_word_word_word_word_word
</TableCell>

方案2：字符串预处理（全浏览器兼容，断行精度最高） #

在渲染前给所有下划线后插入零宽空格\u200B，零宽空格无视觉展示、不会影响文本复制效果，同时会被浏览器识别为合法断行点，只会在下划线位置断行，不会随意截断普通单词。
处理函数示例：

const formatUnderlineText = (text) => {
  return typeof text === 'string' ? text.replaceAll('_', '_\u200B') : text
}

组件内使用：

<TableCell>{formatUnderlineText('word_word_word_word_word')}</TableCell>

两种方案都可以实现你需要的效果：仅在下划线位置断行，和短横线字符串的默认换行表现完全一致，不会出现内容溢出覆盖其他单元格的问题。

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