标记内的文本<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 for <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;       
}