HTML,CSS:使用`<xmp>`,`<pre>`或`code`显示HTML代码？

Question

其中<xmp>,<pre>或者<code>,<xmp>已被推荐[1]显示HTML代码.

鉴于html如:

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

看工作小提琴

我的一条线很长,所以需要大量的水平滚动. 如何word-break(强制线跳)<xmp>？

我希望在没有解析或滚动的情况下显示代码(html,JS).

---

[1]:相关:是否有HTML/CSS方式显示HTML标签而无需解析？(建议没有解决方案的xmp用于换行)

---

编辑:解决方案http://jsfiddle.net/hucY9/5/

xmp { white-space: pre-wrap }

Answer 1

就像你一样pre,你可以设计样式xmp,使它没有真正预先格式化,但是根据需要,通过设置将线条包裹在空格或其他允许的断点处

xmp {white-space: pre-wrap }

但是,这会产生换行,以便第二部分从最左边开始,而不是与第一部分相同(或更大)的缩进.这使得代码看起来很乱.

另请注意,在浏览器中实现的换行可能会使文本无效为HTML标记.例如,许多浏览器可以在连字符后随意中断,但是例如HTML属性data-filter不能被破坏.当然,这只是用户看到的标记问题,但仍然如此.

要创建智能包装(如在许多文本编辑器和编程环境中),您需要JavaScript或更复杂的设置,其中每一行都是它自己的元素,使用CSS中的左边距缩进,而不是空格.

Answer 2

最好的跨浏览器方式适合我(chrome,Internet Explorer,Firefox).

它有助于我获得换行符并显示确切的代码/文本:

CSS:

xmp{ white-space:pre-wrap; word-wrap:break-word; }

HTML:

<xmp> your text or code </xmp>