HTML tag causes linebreaks

问题

I'm using CSS (via JQuery , but not relevant to this question) to highlight certain elements within an HTML file: I'm using "pre" tags to separate out logical elements in my file, but I noticed that "pre" tags seem to leave newlines between elements.

Can I get rid of these using CSS ?

(Or what shall I use instead of "pre" tags? The text elements may contain HTML elements themeselves : which should not be rendered, and should be shown literally as source-code: hence my initial choice with "pre" tags)

Here's an example of the HTML I'm using: (Requires http://docs.jquery.com/Downloading_jQuery for this example)

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

I'm using Firefox 3.6.12. This is what the code above results in:

And this is simulated output of what I want (switched to yellow, only because I used my vim editor to this, pretend it's red!)

SOLUTION:

Is to use 'display:inline' for all PRE tags. (Previously I was only applying the 'display:inline' to the 'error' tags in the example above, and had forget to do the same for 'ok' pre tags.

回答1:

That's because <pre> has a default style display: block, use in your css pre { display: inline}

as for your edit, you need to add margin: 0; to ALL the pre blocks, not just the ones you want to style:

pre {
    display: inline;
    margin: 0;
}

You should try to avoid styling with JS whenever possible, but if you really must:

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

回答2:

The pre tag is a block level element, so it will behave like any other block level element and stack vertically (like paragraph, div, etc). You can set it to display:inline instead, I guess.

But better would be to use the <code> tag, which is inline by default.

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

回答3:

You can fix with css as follow

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:

You can force the pre tag to be a inline element by adding this in head:

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

回答5:

You can convert HTML source to use special chars instead of < > (like < >). You can do this with notepad++ using TextFX Plugin (Encode HTML) or in eclipse you can do this with anyedit tools.

回答6:

Why are you using jQuery for something that can be achieved via 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>

回答7:

you can use padding:0 and margin:0 for pre in css

回答8:

pre { margin: 0; }

should give you the rendering in the second picture. Your snippet probably doesn't work because you don't remove the default margin from the pre.ok.

回答9:

Don't use pre, instead escape the characters you want to display literally. Like < and > for < and >. When you render your page, you can use a function like htmlentities() (PHP) to escape these characters for you.

来源：https://stackoverflow.com/questions/4233869/html-pre-tag-causes-linebreaks

标签

html