HTML, CSS: Display HTML code with `<xmp>`, `<pre>` or `code`?

Question

Among <xmp>, <pre> or <code>, <xmp> have been recommended[1] to display HTML code.

Given html such as:

<xmp>
<div data-role="page" data-theme="b">
    <header></header>
    <div data-role="content">
            <ul data-role="listview" data-filter="true">
                <li><a href="index.html">Some</a></li>
                <li><a href="index.html">random</a></li>
                <li><a href="index.html">content</a></li>
                <li><a href="index.html">With a very long annoying line which naturally goes roge by going outside the main windows and requesting scrolling. So childish !</a></li>
            </ul>
    </div>
    <footer></footer>
</div><!-- page end-->
<script>      
someJS(parameter) { 
  $('header').append('hello!');
}
</script>
</xmp>

See working fiddle

One of my lines is very long and so, requires a lot of horizontal scrolling. How to word-break (force line jump) on <xmp> ?

I wish to display code (html, JS) without parsing nor scrolling.

---

[1]: Related : Is there a HTML/CSS way to display HTML tags without parsing? (suggest xmp without solution for line break)

---

Edit: Solution http://jsfiddle.net/hucY9/5/

xmp { white-space: pre-wrap }

Answer 1

Just as for pre, you can style xmp so that it is not really preformatted but lines wrap at spaces or other permitted line break points as needed, by setting

xmp {white-space: pre-wrap }

However, this makes a line break so that the second part starts at the very left, not with the same (or larger) indentation as the first part. This makes the code look messy.

Also note that line wrapping as implemented in browsers may turn the text invalid as HTML markup. For example, many browsers feel free to break after a hyphen, but e.g. an HTML attribute like data-filter must not be broken. Of course it would be just a matter of markup that the user sees, but still.

To create intelligent wrapping (as in many text editors and programming environments), you would need JavaScript or a more complicated setup where each line is an element of its own, indented using left margin in CSS, not with spaces.