Javascript字符串不会换行答案

【问题标题】：Javascript string does not break in new linesJavascript字符串不会换行
【发布时间】：2020-11-10 18:26:44
【问题描述】：

我正在尝试用换行符换行，我的代码如下所示：

  return (
    <>
      {`${t('UserName')}: ${Username}\n 
        ${t('FirstName')}: ${FirstName}\n
        ${t('LastName')}: ${LastName}`}
    </>
  );

当我检查 HTML 时，它看起来像是换行了：

但不幸的是，这不起作用..在 UI 中显示为：

不经意间排成一排..

【问题讨论】：

你试过了吗
？

标签： javascript html reactjs ecmascript-6 newline

【解决方案1】：

试试这个

  return (
    <>
      {`${t('UserName')}: ${Username}`<br>
        `${t('FirstName')}: ${FirstName}`<br>
        `${t('LastName')}: ${LastName}`}
    </>
  );

【讨论】：

比它在 UI 中显示的要多
我已经更新了答案尝试做这样的事情

【解决方案2】：

目前，由于默认的white-space 值为normal，因此换行符被视为与其他空格相同

来自 MDN 网络文档：

white-space:normal - 空白序列被折叠。 换行符 source 的处理方式与其他空白相同。线条被打破为需要填充行框。

如果您确实必须使用\n 进行布局，您可以使用white-space: pre-line。

white-space:pre-line - 保留空白序列。 换行符换行字符，<br>，并根据需要填充行框。

document.getElementById("root").innerHTML="&lt;div&gt;123\n456&lt;/div&gt;"

div {
   white-space: pre-line;
}

&lt;div id="root"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

尝试给它一个 css 属性“whiteSpace: 'pre-wrap'” 几天前我遇到了同样的问题，它对我有用

【讨论】：

【解决方案4】：

您可能想将您的React.Fragment 简写更改为div？然后，添加内联样式：

return (
    <div style={{whiteSpace: 'pre-line'}}>
        {`${t('UserName')}: ${Username}\n 
        ${t('FirstName')}: ${FirstName}\n
        ${t('LastName')}: ${LastName}`}
    </div>
);

【讨论】：