在 JavaScript 中添加换行符或换行符未按预期工作

Question

我正在使用这条线：

 

 userResultMapOne = "But your value of " + userInputMapOne + " \nis too high for this scenario."

我尝试了多种不同的方式来使用 \n 来换行。实际上，我真正想要的是让文本在移动设备上换行到下一行，但由于一些奇怪的原因，文本刚刚离开屏幕（它正在以 Bootstrap 模式显示）。

什么是允许 JS innerHTML DOM 修改包裹在小型设备上的正确方法，尤其是在 Bootstrap 模式中？

*编辑 - 我做了更多调查，但我仍然不知道为什么两个输出之一是正确的。

这是两个检查输出。第一个显示没有换行，但第二个正确地显示了换行。谁能看出这是为什么？

Answer 1

而不是 \n 替换

Answer 2

您可能正在使用innerHTML 插入字符串，您应该使用innerText

const userInputMapOn = '[USER_VALUE]';
const userResultMapOne = "But your value of  "+ userInputMapOn + "\nis too high for this scenario";

const p1 = document.querySelector('#innerHTML');
const p2 = document.querySelector('#innerText');

p1.innerHTML = '_ With innerHTML : ' + userResultMapOne;
p2.innerText = '_ With innerText : ' + userResultMapOne;

<p id="innerHTML"></p>
<p id="innerText"></p>

Template literals：

const userInputMapOn = '[USER_VALUE]';
const userResultMapOne = `But your value of  ${userInputMapOn} \nis too high for this scenario`;

const p = document.querySelector('p');

p.innerText = userResultMapOne;

<p></p>

编辑：

如果您需要将 HTML 与字符串一起插入，只需将 \n 替换为 <br> 并使用 innerHTML，如下所示：

const userInputMapOn = '[USER_VALUE]';
const userResultMapOne = `But your value of  <b>${userInputMapOn}</b> \nis too high for this scenario`;

const p = document.querySelector('p');

p.innerHTML = userResultMapOne.replace(/(?:\r\n|\r|\n)/g, '<br>');

<p></p>