HTML<；预处理>；标记导致换行

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

我可以用CSS去掉这些吗

（或者我应该使用什么来代替“pre”标记？文本元素可能包含HTML元素themeselves:不应该呈现，应该以源代码的形式显示：因此我最初选择使用“pre”标记）

下面是我正在使用的HTML示例：（此示例需要）

这是一个错误行。
stack.trace.blah.blah
更多，等等
耶，耶，等等
这不是错误行。它包含html
htmlhead/headbodyhello/body/html
这是一个错误行。
stack.trace.blah.blah
更多，等等
耶，耶，等等
$（“pre.error”）.css（{“背景色”：“红色”，“颜色”：“白色”，“显示”：“块”，“填充”：“0”，“边距”：“0”）；

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

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

解决方案：

是对所有预标记使用“display:inline”。（之前，我只是将“display:inline”应用于上述示例中的“error”标记，而忘记了对“ok”pre标记执行同样的操作。

这是因为

pre {
    display: inline;
    margin: 0;
}

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

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


$（“pre.error”）.css（{“背景色”：“红色”，“颜色”：“白色”，“显示”：“块”，“填充”：“0”，“边距”：“0”）；
$（“pre”）.css（{“margin”：0，“padding”：0}）
您可以将HTML源代码转换为使用特殊字符，而不是
（如
）。您可以使用notepad++使用TextFX插件（编码HTML）或在eclipse中使用任何编辑工具来实现这一点。
pre标记是块级元素，因此它的行为与任何其他块级元素类似，并垂直堆叠（如段落、div等）。我想您可以将其设置为display:inline

但是最好使用
标记，默认情况下它是内联的

您可以通过在head中添加以下内容来强制pre标记成为内联元素：

pre { margin: 0; }

pre{display:inline；}
您可以在css中使用
padding:0
和
margin:0
作为
pre
不要使用pre，而是逐字转义要显示的字符。例如
和
用于
。
呈现页面时，可以使用类似于
htmlentities（）
（PHP）的函数为您转义这些字符

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 */

    }

。您的代码片段可能不起作用，因为您没有从
pre.ok
中删除默认边距。为什么要使用jQuery来实现可以通过CSS实现的功能


前{
显示：块；
填充：0；
保证金：0；
}
前误差{
背景色：红色；
颜色：白色；
}
这是一个错误行。
stack.trace.blah.blah
更多，等等
耶，耶，等等
这不是错误行。它包含html
htmlhead/headbodyhello/body/html
这是一个错误行。
stack.trace.blah.blah
更多，等等
耶，耶，等等
您可以使用css进行如下修复

使用特殊字符而不是<>（如<；）。您可以更改pre的显示属性，但它不是pre的显示属性。pre用于预格式化文本。pre正在为我需要的内容执行正确的操作-问题是，它在每个pre之间引入了一个完整的换行符；这是我想要删除的额外行。是-不支持“开箱即用”在IE<7 tho iirc中，首先设置haslayet，然后设置显示：inline；

，这样它才能在那里工作。@monojohnny，进一步解释？：）是的：这对我的Firefox有效-我必须在“pre”的每一个内容末尾添加一个额外的换行符。@Marko-我的意思是，我现在需要在后面添加一个换行符，而不是hello here[新行]为了确保下一个元素不会在另一个元素完成的地方继续。有意义吗？实际上我在这里似乎是错的：这对我来说似乎不起作用。这可能是我做的事情，但在我做这件事时必须暂时取消选中答案…

+并赢得这一个。看起来正确，语义正确。实际上是“code”标记seems的使用更为棘手：它去掉了前导空间，而pre是（正确地适用于我的情况）保留它们。我不完全确定你现在想要实现什么。你想在没有换行符的情况下使用换行符吗？也许这有助于模拟你的预期输出。啊，我明白了。Sotiris关于设置边距和填充的建议在这种情况下肯定会起作用，所以我怀疑有什么东西覆盖了边距/填充-perhaps在CSS中的某个地方有一个行高，或者甚至在其他地方有一个更具体的边距。你安装了Firebug吗？它可以让你突出显示pre标记，并调查是否有恶意的边距扭曲了你的布局。我在这里找到了我想要的答案，但发现每个回答的人似乎都回答了一个问题，这很有趣与所有其他答案完全不同的问题。答案涉及块级与内联元素、实体转义、CSS空白处理、删除边距和填充-它们都是不同问题的不同答案。真的只是一个观察。那么你的意思是：使用“div”或“p”或“span”（你会推荐哪个？），预处理内联文本（将其中的任何HTML“文字化”）并使用CSS使其看起来像我想要的一样？谢谢你的建议。尝试了这个（编辑了我的原始帖子）-但仍然没有做我需要的。我添加了一个屏幕截图来显示我的意思，以及我想要的最终结果。我想使用JQuery还有其他原因（主要是为了我能[更容易地]得到一个
pre { margin: 0; }

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 */

    }