Question

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

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

（或者我应该使用什么而不是“pre”标签？文本元素可能包含自己的HTML元素：不应该呈现，并且应该按字面显示为源代码：因此我的“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。这就是上面的代码导致的结果： alt text

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

alt text

解决方案：

对所有PRE标签使用'display：inline'。（之前我只是在上面的例子中将'display：inline'应用于'error'标签，并忘记对'ok'预标签执行相同操作。

Answer 1

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

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

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>

Answer 2

pre标签是块级元素，因此它的行为与任何其他块级元素一样，并且垂直堆叠（如段落，div等）。您可以将其设置为显示：内联，我猜。

但更好的方法是使用<code>标记，默认情况下为内联。

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

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

    }

Answer 4

您可以通过在head：

中添加此标记来强制将pre标记作为内联元素

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

Answer 5

您可以将HTML源转换为使用特殊字符而不是< >（例如< >）。您可以使用TextFX插件（编码HTML）使用notepad ++执行此操作，或者在eclipse中使用anyedit工具执行此操作。

Answer 6

为什么使用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>

Answer 7

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

Answer 8

不要使用pre，而是从字面上转义要显示的字符。与<和>的{{1}}和<类似。渲染页面时，可以使用>（PHP）之类的函数为您转义这些字符。

Answer 9

pre { margin: 0; }

should give you the rendering in the second picture。您的代码段可能无效，因为您没有从pre.ok删除默认边距。

HTML <pre> tag causes linebreaks</pre>

9 个答案: