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

时间:2017-02-09 16:50:22

标签: html

我需要在页面上显示一些代码而不解析它 - 我可以使用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>

1 个答案:

答案 0 :(得分:2)

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

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

xmp{
    white-space: pre-wrap;
}

Demo)。

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