React中使用.map渲染单字母时如何包裹单词避免行内单词被截断

你想的通过判断空格拆分单词的思路是可行的，但不要直接在map中动态开闭JSX标签——JSX是语法糖，不支持类似字符串拼接那样的半标签写法，会直接抛出语法错误。正确的实现方式是先对单字母数组做预处理，按空格拆分成独立的单词分组，再按分组渲染，每个单词外层套上强制不换行的容器即可。

步骤1：预处理数组，按单词分组 #

// 把单字母数组按空格拆分为单词组+空格的结构
const groupedSentence = newSentence.reduce((acc, currentChar) => {
  if (currentChar.letter === ' ') {
    // 遇到空格先把之前攒的单词存入结果
    if (acc.currentWord.length) {
      acc.result.push({ type: 'word', content: acc.currentWord })
      acc.currentWord = []
    }
    // 空格单独存入结果
    acc.result.push({ type: 'space', content: currentChar })
    return acc
  }
  // 非空格字符加入当前单词组
  acc.currentWord.push(currentChar)
  return acc
}, { result: [], currentWord: [] })

// 遍历结束后把剩余的最后一个单词存入结果
if (groupedSentence.currentWord.length) {
  groupedSentence.result.push({ type: 'word', content: groupedSentence.currentWord })
}

步骤2：按分组渲染内容 #

const rptSentence = groupedSentence.result.map((item, index) => {
  // 渲染单词：外层套不换行容器
  if (item.type === 'word') {
    return (
      <span key={`word-${index}`} style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>
        {item.content.map((a) => (
          <p
            style={{
              display: "inline-block",
              whiteSpace: "pre",
              zoom: a.ifBold ? 1.4 : 1,
              color: a.ifBold ? "black" : "#999999",
            }}
            className={
              bolds.includes(a.id)
                ? "letterBold letterregular"
                : ifCatch.includes(a.id)
                ? "letterCatch letterregular"
                : "letterregular"
            }
            key={a.id}
            onClick={() => changeHandler(a)}
          >
            {a.letter}
          </p>
        ))}
      </span>
    )
  }
  // 渲染空格，保留原有逻辑
  return (
    <p
      key={`space-${item.content.id}`}
      style={{
        display: "inline-block",
        whiteSpace: "pre",
        color: "#999999",
      }}
      className="letterregular"
      onClick={() => changeHandler(item.content)}
    >
      {item.content.letter}
    </p>
  )
})

核心说明 #

• 单词外层容器通过white-space: nowrap强制整体不换行，彻底解决单词中间被截断的问题
• 原有单字母的点击事件、样式、高亮逻辑完全保留，不会影响已有功能
• 注意你原代码中# 999999的十六进制颜色值中间多了空格，会导致样式不生效，示例代码中已经修正

内容的提问来源于stack exchange，提问作者R-S