在容器中使用XMP在页面上显示代码

Question

我需要在页面上显示一些代码而不解析它 - 我可以使用XMP来做到这一点，但它似乎不在其所在容器的范围内？有没有办法让它适合div的宽度？

http://codepen.io/r3dg3cko/pen/RKeBQb

<div style="width: 300px; height: 100px; background: grey">
<XMP><img     src="/WVO/WVOITSD/Picture%20Library/Site%20Editing%20Guide%20Images/SEG14.png" style="max-width:100%; cursor:pointer"onclick="onClick(this)" class="modal-hover-opacity"></XMP>
</div>

Answer 1

如果使用浏览器开发人员工具检查节点，您会发现两个标签的宽度确实为300px。问题是内容溢出是因为它们没有换行符（这是<pre>和<xmp>标记的默认值。）

您可能希望使用<xmp>标记中的空格设置，例如：

xmp{
    white-space: pre-wrap;
}

（Demo）。

正如乔丹所指出的那样，该标签已经被弃用多年了，它在技术上已从HTML中移除，就像版本5一样。（我特别只使用它作为快速调试技巧，在编码时显示来自PHP的变量。）它很容易逃脱大多数编程语言中的HTML标记。