HTML, CSS:用' '， ' '或' code '来显示HTML代码?

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

在

、&amp;lt;pre&amp;gt;或&amp;lt;code&amp;gt;中，&amp;lt;xmp&amp;gt;被推荐用于显示HTML代码。&amp;lt;/p&amp;gt;

Given html such as:

给定的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>

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

我的一行很长，所以需要大量的水平滚动。如何在

上断字(力线跳转)?&amp;lt;/p&amp;gt;

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

我希望显示代码(html, JS)，不解析也不滚动。

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

相关:是否有一种不用解析就能显示HTML标签的HTML/CSS方法?(建议xmp无断线解决方案)

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

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

xmp { white-space: pre-wrap }

2 个解决方案

#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

与pre一样，您可以对xmp进行样式化，使其不是真正的预格式化，而是根据需要在空格或其他允许的换行点进行换行

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.

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

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.

要创建智能包装(就像在许多文本编辑器和编程环境中一样)，您需要JavaScript或更复杂的设置，其中每行都是自己的元素，使用CSS中的左对齐，而不是空格。

#2

The BEST Cross Browser Way worked for me (chrome, internet explorer, Firefox).

最好的跨浏览器方式对我起了作用(chrome, ie，火狐)。

It worked for me to get line breaks and shows exact code/text:

它可以让我得到换行符，并显示准确的代码/文本:

CSS:

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

HTML:

<xmp> your text or code </xmp>

#1