React中如何从动态字符串内容强制换行？

下面给你几个可行的解决方法：

方法一：使用dangerouslySetInnerHTML（注意内容安全性） #

如果后端返回的标题内容是可信的（不会包含恶意代码），可以直接把目标单词替换成带<br>的字符串，再用dangerouslySetInnerHTML渲染：

return (
  <p 
    className="font-mukta tracking-0.165 text-center lg:text-start text-32px md:text-44px xl:text-6xl font-medium pb-2 md:pb-0 xl:leading-snug"
    dangerouslySetInnerHTML={{ __html: title.replace('simply', 'simply<br>') }}
  />
)

注意：如果标题内容不可控，这个方法可能带来XSS风险，谨慎使用。

方法二：拆分字符串为React元素数组（安全无风险） #

把标题按目标单词拆分，再拼接成包含<br />的React元素数组，完全避免XSS问题：

import React from 'react';

// 按目标单词拆分，保留单词本身
const parts = title.split(/(simply)/);

return (
  <p className="font-mukta tracking-0.165 text-center lg:text-start text-32px md:text-44px xl:text-6xl font-medium pb-2 md:pb-0 xl:leading-snug">
    {parts.map((part, idx) => 
      part === 'simply' ? <span key={idx}>simply<br /></span> : part
    )}
  </p>
)

如果需要支持多个相同单词，这个正则写法会匹配所有出现的"simply"，每个后面都加换行。

方法三：用CSS实现换行（适合需要样式化单词的场景） #

给目标单词套上<span>，然后通过CSS让它强制换行：

// 先替换字符串，给目标单词加span
const processedTitle = title.replace('simply', '<span class="break-after">simply</span>');

return (
  <p 
    className="font-mukta tracking-0.165 text-center lg:text-start text-32px md:text-44px xl:text-6xl font-medium pb-2 md:pb-0 xl:leading-snug"
    dangerouslySetInnerHTML={{ __html: processedTitle }}
  />
)

对应的CSS：

.break-after {
  display: block;
}

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