16

我正在使用 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。这就是上面代码的结果： 替代文字

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

替代文字

解决方案：

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

4

9 回答 9

36

那是因为<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>
于 2010-11-20T17:02:10.930 回答
9

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

但更好的是使用<code>标签，默认情况下它是内联的。

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

于 2010-11-20T17:05:03.607 回答
4

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

<style type='text/css'> pre {display: inline;} </style>
于 2010-11-20T17:06:13.610 回答
4

您可以使用 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 */

    }
于 2012-07-26T08:11:29.980 回答
2

你为什么要使用 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>
于 2010-11-20T22:00:23.927 回答
1

您可以将 HTML 源代码转换为使用特殊字符而不是< >(like &lt; &gt;)。您可以使用 TextFX 插件（编码 HTML）使用 notepad++ 来执行此操作，或者在 Eclipse 中您可以使用 anyedit 工具执行此操作。

于 2010-11-20T17:04:45.293 回答
1 
pre { margin: 0; }

应该给你第二张图片中的渲染。您的代码段可能不起作用，因为您没有从pre.ok.

于 2010-11-20T21:19:49.123 回答
0

你可以在 css中使用padding:0and margin:0forpre

于 2010-11-20T17:06:14.393 回答
0

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

于 2010-11-20T17:06:14.953 回答