在 JSON 字符串中反应 i18n 换行

Question

我正在与 i18next 合作进行反应 https://github.com/i18next/react-i18next 。我正在努力在我的 JSON 语言文件中的字符串中换行。

这是我已经尝试过的，不会换行：

• line: "This is a line. \n This is another line. \n Yet another line" ,
• line: ("This is a line."+ <br/> + "This is another line. \n Yet another line") ,
• line: ('This is a line. <br/> This is another line. \n Yet another line') ,

我显然试图在每个句子后换行。我就是这样称呼它的：

 <TooltipLink onClick={() => {
    this.toggleHelpTextDialog(t('test:test.line'));
}}/>

有任何想法吗？谢谢！

原文由 Nocebo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在翻译文本中使用 css white-space: pre-line; & \n 来完成。

 const root = document.getElementById('root');

i18next.init({
  lng: 'en',
  resources: {
    en: {
      translation: {
        "key": "Hello world\nThis sentence should appear on the second line"
        // ----------------^ new line char
      }
    }
  }
}, function(err, t) {
  // initialized and ready to go!
  root.innerHTML = i18next.t('key');
});

 #root {
  white-space: pre-line;
}

 <script src="https://unpkg.com/i18next@15.0.9/dist/umd/i18next.min.js"></script>

<div id="root"></div>

原文由 felixmosh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您也可以使用 CSS 来做到这一点，这很容易做到：

CSS：

 #root {
  white-space: pre-line;
}

HTML:

 <script src="https://unpkg.com/i18next@15.0.9/dist/umd/i18next.min.js"></script>

<div id="root"></div>

它会将翻译 JSON 中的 \n 解释为换行符！！！

原文由 Philip König 发布，翻译遵循 CC BY-SA 4.0 许可协议