<pre> 标签内的文本没有换行 [重复]

Question

response.text 包含google.com 的html 源。
为什么html 源没有包含在我的<pre> 中？
当前的解决方案创建了一个巨大的侧滚动区域，我希望任何超出窗口宽度的文本都可以换行。
我想避免在这个解决方案中使用innerHTML。

var pre = document.createElement('pre');
pre.appendChild(document.createTextNode(response.text));
document.getElementById("body").appendChild(pre);

css 为<pre> ..

pre {
    outline: 1px solid #ccc; 
    padding: 5px; 
    margin: 5px; 
    white-space: -moz-pre-wrap; 
}

Answer 1

像下面这样使用，

pre {
    outline: 1px solid #ccc; 
    padding: 5px; 
    margin: 5px; 
    white-space: pre-wrap;       
    white-space: -moz-pre-wrap;  
    white-space: -pre-wrap;      
    white-space: -o-pre-wrap;    
    word-wrap: break-word;       
}