React组件中如何将翻译字符串分两行显示，第二行从第三个单词开始

开发者阿泽

2026-7-7

解决方法

方法一：CSS处理换行（最简单，无需修改组件逻辑）

直接在翻译文件的myText里用\n分隔前两个单词与后续内容：

"Text that\nI want to display"

然后给<p>标签添加样式让换行符生效：

.parent p {
  white-space: pre-line;
}

或者用内联样式更直接：

<div className="parent">
  <p style={{ whiteSpace: 'pre-line' }}>{t('myText')}</p>
</div>

pre-line会识别换行符，同时自动合并多余空格，刚好适配排版需求。

方法二：拆分字符串插入`<br />`（无需修改翻译文件）

如果不想动翻译文件，可在组件里把字符串按空格拆分，手动插入换行标签：

<div className="parent">
  <p>
    {(() => {
      const words = t('myText').split(' ');
      return (
        <>
          {words.slice(0, 2).join(' ')}
          <br />
          {words.slice(2).join(' ')}
        </>
      );
    })()}
  </p>
</div>

这种方式不管翻译字符串内容怎么变，都会自动把前两个单词放在第一行，剩余内容放在第二行，灵活性更强。