HTML <pre> 标签导致换行答案

【问题标题】：HTML <pre> tag causes linebreaksHTML <pre> 标签导致换行
【发布时间】：2011-05-13 03:25:40
【问题描述】：

我正在使用 CSS（通过 JQuery，但与此问题无关）来突出显示 HTML 文件中的某些元素：我正在使用“pre”标签来分隔文件中的逻辑元素，但我注意到“ pre" 标签似乎在元素之间留下换行符。

我可以使用 CSS 摆脱这些吗？

（或者我应该用什么来代替“pre”标签？文本元素本身可能包含 HTML 元素：应该 not 呈现，并且应该按字面意思显示为源代码：因此我的带有“pre”标签的初始选择）

这是我正在使用的 HTML 示例：（此示例需要 http://docs.jquery.com/Downloading_jQuery）

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js">
</script>
</head>
<body>
<pre class="error">
This is an error line.
    stack.trace.blah.blah
    more.blah.blah
    yadda.yadda.blah</pre>
<pre class="ok">
this is not an error line.it contains html
&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;hello&lt;/body&gt;&lt;/html&gt;</pre>
<pre class="error">
This is an error line.
    stack.trace.blah.blah
    more.blah.blah
    yadda.yadda.blah</pre>
<pre class="ok">

<script type="text/javascript">
    $("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});
</script>
</body>
</html>

我使用的是 Firefox 3.6.12。这就是上面代码的结果：

这是我想要的模拟输出（切换到黄色，只是因为我使用我的 vim 编辑器，假装它是红色的！）

解决方案：

是对所有 PRE 标签使用 'display:inline'。（以前我只是将 'display:inline' 应用于上面示例中的 'error' 标签，而忘记对 'ok' pre 标签做同样的事情。

【问题讨论】：

我不完全确定你现在想要实现什么。你想有换行符而没有换行符吗？也许这有助于模拟您的预期输出。
啊，我明白了。 Sotiris 设置边距和填充的建议在这种情况下肯定应该起作用，所以我怀疑有什么东西会覆盖边距/填充 - 可能是某处的行高，甚至是 CSS 中其他地方的更具体的边距。你有安装 Firebug 吗？它可以让您突出显示 pre 标签并调查您的布局是否存在流氓边距。
我在这里得到了我一直在寻找的答案，但令人着迷的是，每个回答的人似乎都回答了与所有其他答案完全不同的问题。答案涉及块级与内联元素、实体转义、CSS 空白处理、删除边距和填充——它们都是对不同问题的不同答案。真的只是一个观察。

标签： html css newline line-breaks pre

【解决方案1】：

pre 标签是块级元素，因此它的行为与任何其他块级元素一样并垂直堆叠（如段落、div 等）。我猜你可以将它设置为 display:inline 。

但最好使用<code> 标签，它默认是内联的。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code

【讨论】：

+ >和 <赢了这个。看起来正确，语义正确。
实际上，“代码”标签似乎更难使用：它去除了前导空格，而 pre 是（对于我的情况正确）保留它们。

【解决方案2】：

那是因为<pre> 有一个默认样式display: block，在你的css 中使用pre { display: inline}

至于您的编辑，您需要将 margin: 0; 添加到所有 pre 块，而不仅仅是您要设置样式的块：

pre {
    display: inline;
    margin: 0;
}

您应该尽可能避免使用 JS 进行样式设置，但如果您确实必须这样做：

<script type="text/javascript">
    $("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});
    $("pre").css({ "margin" : 0, "padding" : 0 })
</script>

【讨论】：

aye - 在 IE 中不支持“开箱即用”display: inline; 让它在那里工作。
@monojohnny，进一步解释一下？ :)
是的：这适用于我的 Firefox - 我必须在“pre”的每个内容的末尾添加一个额外的换行符。
@Marko - 我的意思是代替
```
hello there
```
我现在需要添加一个尾随换行符，例如
```
hello there [newline]
```
以确保下一个
```
 元素不会在另一个完成的地方继续。有意义吗？
```
实际上我在这里似乎错了：这似乎对我不起作用。这可能是我已经做过的事情，但现在我必须取消选中答案...

【解决方案3】：

您可以使用 css 修复如下

pre {
    width: 600px;                          /* specify width  */
    white-space: pre-wrap;                 /* CSS3 browsers  */
    white-space: -moz-pre-wrap !important; /* 1999+ Mozilla  */
    white-space: -pre-wrap;                /* Opera 4 thru 6 */
    white-space: -o-pre-wrap;              /* Opera 7 and up */
    word-wrap: break-word;                 /* IE 5.5+ and up */

    }

【讨论】：

你能解释一下答案，以便人们了解你做了什么来解决它吗？

【解决方案4】：

你为什么要使用 jQuery 来实现可以通过 CSS 实现的东西？

<html>
<head>
    <style type="text/css">
    pre {
        display: block;
        padding: 0;
        margin: 0;
    }
    pre.error {
        background-color: red;
        color: white;
    }
    </style>
</head>
<body>
    <pre class="error">
This is an error line.
    stack.trace.blah.blah
    more.blah.blah
    yadda.yadda.blah</pre>
    <pre class="ok">
this is not an error line.it contains html
&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;hello&lt;/body&gt;&lt;/html&gt;</pre>
    <pre class="error">
This is an error line.
    stack.trace.blah.blah
    more.blah.blah
    yadda.yadda.blah</pre>
</body>
</html>

【讨论】：

我有其他原因想要使用 JQuery（主要是为了我可以[更容易]动态应用样式） - 使用 JQuery（我会说）不应该是这个问题的重要区别 -因为（本质上）JQuery 只是使用 Javascript 来应用 CSS 规则......（我想......）
@monojohnny：哪些位将是动态的？您是否真的要动态更改padding 或margin？

【解决方案5】：

您可以将 HTML 源代码转换为使用特殊字符而不是 &lt; &gt;（如 &lt; &gt;）。您可以使用 TextFX 插件（编码 HTML）在 notepad++ 中执行此操作，或者在 eclipse 中您可以使用任何编辑工具执行此操作。

【讨论】：

使用特殊字符代替（如 & lt; > ）。
您可以更改 pre 的显示属性，但这不是 pre 的用途。 pre 用于预格式化文本。
pre 正在为我的需要做正确的工作 - 问题是，它在每个 pre 之间引入了一个完整的换行符；这是我想摆脱的多余的线。

【解决方案6】：

不要使用 pre，而是转义要按字面显示的字符。就像 &lt; 和 &gt; 对于 < 和 >。渲染页面时，您可以使用 htmlentities() (PHP) 之类的函数为您转义这些字符。

【讨论】：

那么你的意思是：使用 'div' 或 'p' 或 'span' （实际上你会推荐哪个？），预处理内嵌文本（以“文字化”任何 HTML那里）并使用 CSS 使它看起来像我想要的？

【解决方案7】：

pre { margin: 0; }

should give you the rendering in the second picture。您的 sn-p 可能不起作用，因为您没有从 pre.ok 中删除默认边距。

【讨论】：

【解决方案8】：

您可以在 css 中使用 padding:0 和 margin:0 为 pre

【讨论】：

感谢您的建议。尝试了这个（编辑了我的原始帖子） - 但仍然没有做我需要的。我添加了一个屏幕截图来说明我的意思，以及我想要的最终结果。

【解决方案9】：

你可以通过在head中添加这个来强制pre标签成为一个内联元素：

<style type='text/css'> pre {display: inline;} </style>

【讨论】：