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.

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>

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

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

    }

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

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

bkilinc

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.

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>

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

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.

GolezTrol

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

css

newline

line-breaks

pre

HTML <pre> tag causes linebreaks