HTML <pre> tag causes linebreaks

html css newline line-breaks pre

39,316

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

Solution 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

Solution 3

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

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

Solution 4

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

    }

Solution 5

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>

View more solutions

39,316

Author by

monojohnny

Updated on July 09, 2022

Comments

monojohnny almost 2 years
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.
bkilinc over 13 years

use special chars instead of < > (like & lt; > ).
Razor over 13 years

aye - not supported "out of the box" in IE < 7 tho iirc - set hasLayout first and then display: inline; for it to work there.
bkilinc over 13 years

you can change display properties of pre but it is not what pre for. pre is for preformatted text.
Marko over 13 years

@monojohnny, explain further? :)
Arve Systad over 13 years

<code> + > and < wins this one. Looks right and is semantically correct.
monojohnny over 13 years

Yes: that works for my Firefox - I had to include an extra newline at the end of each of the contents of the "pre".
monojohnny over 13 years

Actually the 'code' tag seems to be trickier to use: its stripping out leading spaces whereas pre is (correctly for my case) keeping them.
monojohnny over 13 years

So do you mean: Use 'div' or 'p' or 'span' (which would you recommend actually?) , pre-process the in-line text (to 'literalize' any HTML in there) and use CSS to make it look like what I want?
monojohnny over 13 years

The pre is doing the correct job for what I need - the trouble is , it introduces a full newline between each pre; it is this extra line I want to get rid of.
monojohnny over 13 years

@Marko - I mean instead of <pre>hello there</pre> I now need to add in a trailing newline like <pre>hello there [newline]</pre> to ensure the next <pre> element doesn't continue where the other one finished. Make sense?
monojohnny over 13 years

Actually I appear to be wrong here : this doesn't appear to work for me. It might be something I have done, but have to uncheck the answer for now whilst I do this...
monojohnny over 13 years

Sorry Marko - your solution didn't seem to work (I have re-edited my initial post to include a screenshot and better illustrated code) - perhaps I have made a mistake here...
monojohnny over 13 years

Thanks for the suggestion.Tried this (edited my original post) - but still not doing what I need. I have added a screenshot to show what I mean , and also what I want as the end-result.
monojohnny over 13 years

Ok - this does work - thanks to everybody - it was because I have a mixture of pre tags - and was only introducing the display:inline for the 'error' pre elements and not the 'ok' pre elements. All works now. Thanks
monojohnny over 12 years

I have other reasons for wanting to use JQuery (mainly so that I can [more easily] apply styling dynamically) - using JQuery (I would say) shouldn't be an important difference for this issue - since (in essence) JQuery is using just using Javascript to apply CSS rules..(I thought...)
Eric over 12 years

@monojohnny: Which bits are going to be dynamic? Are you really likely to want to change the padding or margin dynamically?
Cristiano Fontes over 11 years

Can you explain the answer so people can understand what you did to fix it ?