使用 ".text" 或 ".textContent" 时保留换行符。可能？选择？解决方法？

Question

如果我从一个元素中抓取一些html，然后尝试将其指定为另一个元素的文本内容，则不会保留换行符（至少在最新的Firefox和Chromium中不会保留）。

因此，例如，以下代码（使用合理的 html）生成输出，其中换行符被空格替换。好吧，除了警报，它按预期工作。

$("#info").data("html", $("#info").html());
$("#jquery").text($("#info").data("html"));
document.getElementById("javascript").textContent = $("#info").data("html");
$("#alert").click(function() { alert($("#info").data("html")) });

下面是一个运行示例：http://jsfiddle.net/76S7z/2/

应该有一些方法可以将一个元素的html设置为另一个元素的文本，同时正确保留换行符。

"文本"

或"文本内容"可以做到这一点吗？有没有其他方法可以做到这一点？有没有简单的解决方法？一个不太简单的解决方法？

Answer 1

正如您已经确定的那样，Web 浏览器通常不会将换行符呈现为换行符n换行符。如果您不愿意<br />添加换行符元素，则可以使用值为 pre-line 的 white-space CSS 属性，这将：

空格序列被折叠。换行符处、<br> 处换行，并根据需要填充行框。

请务必在使用前检查属性的兼容性表。

<div style="white-space: pre-line;">
    Look
    at
    these line breaks!
</div>

下面是一个 JSFiddle 示例。