<pre>标签使浏览器关闭段落

Question

<pre>标签使浏览器关闭段落

rad*_*man 6 html css opera google-chrome

我在下面的HTML中遇到问题:

<html>
  <body>
    <p style="font-size: large"> 
        Some paragraph text 
        <span><pre style="display:inline">some span text</pre></span> 
        additional paragraph text that continues ...
    </p>

  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

所以这只是一个段落,其中包含一些预先格式化的文本.我遇到的问题是Opera和Chrome都没有像我期望的那样显示.具体来说,他们在跨度之前关闭段落标记并强制换行.WTH？

使用chromes HTML检查选项,它显示标签正在关闭,空插入而不是封闭<pre>.如果删除范围,Chrome仍然会关闭标记,强制换行.

我需要显示以下标记结构,而不强制使用任何换行符<pre><code></code></pre>.这是完全可能还是有其他选择或解决方法？

编辑:我已经锁定了<pre>标签,因为它是wordpress语法高亮插件的一部分.

注意:我认为这里最好的建议是验证您的HTML.我遇到的很多问题是因为某些浏览器正在优雅地处理无效的HTML而其他浏览器并不优雅.验证意味着您可以使用干净的平板.

Answer 1

qme*_*ega 11

pre完全摆脱标签,只需给你的span style="white-space:pre".有关其他选项的说明,请参阅此页面white-space.

<pre>基本上是说<div style="white-space:pre">; 你想要的是什么.

Answer 2

Amb*_*ber 6

段落标记不能包含块级元素:

http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

pre 是块级元素.

white-space: pre如果您希望pre在内联元素中具有类似行为,则可以在跨度上设置CSS样式.

归档时间：	15 年，2 月前
查看次数：	2829 次
最近记录：	12 年，1 月前