Wrap the line in pre

Problem:

The <pre> tag of html is used to keep the format of the content as it is inputted. So, if the content is a long line of text with no line break, then it will displayed as one line and can be out of the container's scope. Even if we've already applied " word-wrap: break-word;" on the <div> outside the <pre>

This is surely ugly on the page. We expect a feature like notepad's auto line feed, so that when it is too long, it will wrap the line automatically.

 

Solution:

Add " word-wrap: break-word;" to the outside <div>

Apply the following css to <pre> tag.

 

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
}

 

Now it looks like this:

 

Try it with jsfiddle