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

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 }