小编典典

在JSON字符串中反应i18n换行

reactjs

我正在与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'));
}}/>

有任何想法吗?谢谢!


阅读 1226

收藏
2020-07-22

共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"

      }

    }

  }

}, function(err, t) {

  // initialized and ready to go!

  root.innerHTML = i18next.t('key');

});


#root {

  white-space: pre-line;

}


<script src="https://unpkg.com/[email protected]/dist/umd/i18next.min.js"></script>



<div id="root"></div>
2020-07-22