HTML,CSS:用“,“或`code`显示HTML代码?

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

working fiddle

我的一条线很长,所以需要大量的水平滚动.
如何在< xmp>上进行分词(强制线跳转) ?

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

[1]:相关:Is there a HTML/CSS way to display HTML tags without parsing?(建议没有解决方案的xmp断线)

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

xmp { white-space: pre-wrap }

解决方法

就像pre之前一样,你可以设置xmp的样式,这样它就不会真正预先格式化,而是根据需要通过设置将行包裹在空格或其他允许的换行点上
xmp {white-space: pre-wrap }

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

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

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

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在&#39;&#39;,则表示换行,用&#39;&#39;切割。
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...