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设置为另一个元素的文本，同时正确保留换行符。

这可能与“text”或“textContent”有关吗？有没有其他方法可以做到这一点？有一个简单的解决方法吗？一个不太简单的解决方法？

Answer 1

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

空格的序列已折叠。换行字符在换行符<br>处断开，并根据需要填充换行符。

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

<div style="white-space: pre-line;">
    Look

    at
    these line breaks!
</div>

white-space

使用“.text”或“.textContent”时保留换行符。可能？备择方案？解决方法？

1 个答案: