html css返回行↵[重复]

Question

这个问题在这里已有答案：

• How do I replace all line breaks in a string with <br /> tags? 10个答案
• How to line-break from css, without using <br />? 25个答案

我有来自服务器的JSON响应，在这个数据中我在文本中有一个“返回行”。

{text: "I am in the first line ↵ and I am in the second line"}

但是当我在html中显示它时，没有显示“返回行”。

"I am in the first line and I am in the second line"

代替：

I am in the first line
and I am in the second line

任何使用HTML或CSS（可能是JavaScript）的解决方案？

谢谢 ！

Answer 1

您可以使用其他用户建议的HTML换行符替换换行符。

const parse = s => s.replace(/[␤␍␊↵⏎]+/g, '\n');
const nl2br = s => s.replace(/\n/g, '<br>');

var data = {
  "text" : "I am in the first line ↵ and I am in the second line"
};

document.getElementById('display').innerHTML = nl2br(parse(data.text));

<div id="display"></div>

Answer 2

添加这个css类解决问题！

white-space: pre-line;