HTML,CSS:用“,“或`code`显示HTML代码?
发布时间:2020-12-14 18:58:43 所属栏目:资源 来源:网络整理
导读:在 xmp, pre中或 code, xmp已被推荐[1]显示 HTML代码. 鉴于html如: xmpdiv data-role="page" data-theme="b" header/header div data-role="content" ul data-role="listview" data-filter="true" lia href="index.html"Some/a/li lia href="index.html"ran
在< 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 我的一条线很长,所以需要大量的水平滚动. 我希望在没有解析或滚动的情况下显示代码(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中的左边距缩进,而不是空格. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |