Text inside
tag is not wrapping

Question

response.text contains the html source of google.com.
How come the html source is not wrapping inside my <pre>?
Current solution creates a huge side scrolling area, I'd like any text that goes beyond the window width to wrap.
I want to avoid use of innerHTML in this solution.

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; 
}

http://stackoverflow.com/questions/248011/how-do-i-wrap-text-in-a-pre-tag — adeneo, Jul 22 '14 at 12:14

score 3 · Accepted Answer · answered Jul 22 '14 at 12:17

Use like below,

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;       
}

Text inside tag is not wrapping

1 Answers1

Text inside
tag is not wrapping