如何在不使用white-space: pre的情况下创建带换行的文本节点？

这个问题我之前也碰到过，white-space: pre确实能精准保留文本里的\n/\x0a换行符，但它的硬伤就是不会自动换行超出容器的长文本——这是它的设计特性导致的。不过有两个CSS属性可以完美兼顾你的需求：

可选方案对比 #

• white-space: pre-wrap：这是最贴合你需求的选项。它会完整保留文本里的所有手动换行符，同时让超出父容器宽度的长文本自动折行，完全不会溢出窗口。
• white-space: pre-line：同样支持手动换行符生效，不过会合并文本里的连续空格（比如多个空格会压缩成一个），长文本也会自动适配容器宽度换行。如果你的文本里有大量冗余连续空格，这个选项更合适。

修改后的代码示例 #

只需要把原来的white-space: pre替换成上面的属性即可：

var textdata = document.createTextNode(text_with_multiples_lines);
// 推荐用pre-wrap，或者根据需求换成pre-line
PanelBody.style.whiteSpace = "pre-wrap";
PanelBody.appendChild(textdata);

如果你习惯用字符串设置样式，也可以这样写：

PanelBody.style = "white-space: pre-wrap;";

这样修改后，文本里的手动换行能正常生效，长文本也会自动适配父div的宽度，不会再出现溢出窗口的问题。

内容的提问来源于stack exchange，提问作者chrigu