如何在ReactJS按钮文本中使用<wbr>实现下划线处换行

针对你遇到的text属性会转义HTML标签的问题，有几个可行的方案：

1. 改用组件的children插槽渲染（优先推荐） #

大部分自定义按钮组件都支持通过children传递JSX内容，这样就不会转义HTML标签。你可以把原字符串按下划线拆分，手动拼接下划线和<wbr>标签：

<ActionButton
  id={desButtonId}
  styles={descriptionBtnStyles}
  onClick={toggleIsDesCalloutVisible}
>
  {button.description.split('_').map((segment, idx) => (
    <>
      {idx > 0 ? <>_<wbr></> : null}
      {segment}
    </>
  ))}
</ActionButton>

这样拆分后，每个下划线后面都会插入<wbr>，实现指定位置的换行，而且不会被转义。

2. 检查组件是否支持HTML文本属性 #

有些UI组件会提供专门的属性来渲染HTML内容，比如htmlText、content或者dangerouslySetInnerHTML（React生态）。如果你的ActionButton有这类属性，可以直接替换text：

比如用dangerouslySetInnerHTML的写法：

<ActionButton
  id={desButtonId}
  styles={descriptionBtnStyles}
  onClick={toggleIsDesCalloutVisible}
  dangerouslySetInnerHTML={{
    __html: button.description.replace(/_/g, '_<wbr>')
  }}
/>

⚠️ 注意：如果用户输入的内容不可控，这种方法有XSS风险，仅在你能确保文本安全的情况下使用。

3. 纯CSS方案（仅当不需要严格控制换行位置时可选） #

如果可以接受文本在下划线附近自动折行，也可以用CSS实现：
给按钮添加样式：

white-space: pre-wrap;
overflow-wrap: anywhere;

但这个方法无法精准控制只在下划线处换行，适合对换行位置要求不严格的场景。

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