React中实现每60字符自动插入换行时\n不生效问题求解

• 核心原因：HTML默认会将连续空白字符（包括换行符\n、空格、制表符等）合并为单个空格显示，因此插入的\n不会被浏览器识别为换行标识。
• 附带问题：原countStr函数存在逻辑错误：循环判断条件写为i<str.length，但接收的参数为str1，且循环结束后最后一段不足60字符的内容没有被拼接进返回结果中。

方案1：CSS属性适配（最推荐，无需修改业务逻辑） #

给包裹文本的<p>标签添加white-space: pre-wrap属性即可让浏览器正常识别\n作为换行标识，同时保留自动折行特性，不会破坏原有布局：

.about p {
  white-space: pre-wrap;
}

方案2：替换换行符为
标签渲染 #

如果不需要修改CSS，可以将\n替换为HTML换行标签<br />后再渲染，分为两种实现方式：

2.1 可控内容直接渲染 #

如果处理的字符串为完全可控的内部内容，无用户输入风险，可使用dangerouslySetInnerHTML渲染：

// 修正后的字符串处理函数
function countStr (str1){
  if (!str1) return ''
  let str2 = ""
  for(let i = 0; i < str1.length; i += 60){
    str2 += str1.substring(i, i + 60) + "\n"
  }
  return str2
}

const About = () =>{
  // 此处替换为你的原始字符串处理逻辑
  const originStr = "需要处理的长文本内容"
  const changedStr = countStr(originStr)
  const renderHtml = changedStr.replace(/\n/g, '<br />')
  return(
    <div className="about">
      <h2>I'm Gal</h2>
      <p dangerouslySetInnerHTML={{__html: renderHtml}} />
    </div>
  )
}
export default About

2.2 存在用户输入的安全实现 #

如果处理的字符串包含用户输入内容，为避免XSS风险，可将处理后的字符串按\n切割为数组后遍历渲染：

const About = () =>{
  const originStr = "需要处理的长文本内容"
  const changedStr = countStr(originStr)
  const strSegmentList = changedStr.split('\n')
  return(
    <div className="about">
      <h2>I'm Gal</h2>
      <p>
        {strSegmentList.map((segment, index) => (
          <React.Fragment key={index}>
            {segment}
            {index !== strSegmentList.length - 1 && <br />}
          </React.Fragment>
        ))}
      </p>
    </div>
  )
}

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