HTML
tag causes linebreaks

Question

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: alt text

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

alt text

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.

I'm not completely sure what you want to achieve now. You want to have linebreaks without having linebreaks? Perhaps it would help to simulate your expected output. — hollsk, Nov 20 '10 at 17:17
Ah, I see. Sotiris' suggestion to set the margin and padding definitely ought to work in that case, so I would suspect there is something overriding the margin/padding - perhaps a line height somewhere, or even a more specific margin somewhere else in your CSS. Do you have Firebug installed? It will let you highlight the pre tags and investigate whether there is a rogue margin screwing with your layout. — hollsk, Nov 20 '10 at 19:29
I got the answer I was looking for here, but find it fascinating that everyone answering seems to have answered a completely different question to all the other answers. Answers involve block level vs inline elements, entity escaping, CSS white space handling, removing margins and padding - they are all different answers to different questions. Just an observation really. — Jason, Nov 26 '13 at 22:25

Razor · Accepted Answer · 2016-08-18T19:00:08.853

38

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>

edited Aug 18 '16 at 19:00

answered Nov 20 '10 at 17:02

Razor

27,418
8
53
76

1

aye - not supported "out of the box" in IE < 7 tho iirc - set hasLayout first and then `display: inline;` for it to work there. – Razor Nov 20 '10 at 17:06
@monojohnny, explain further? :) – Marko Nov 20 '10 at 17:07
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 Nov 20 '10 at 17:09
@Marko - I mean instead of
```
hello there
```
I now need to add in a trailing newline like
```
hello there [newline]
```
to ensure the next
```
 element doesn't continue where the other one finished. Make sense?
```
– monojohnny Nov 20 '10 at 17:24
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 Nov 20 '10 at 17:38
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 Nov 20 '10 at 17:49
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 Nov 21 '10 at 13:00

hollsk · Answer 2 · 2018-10-26T12:34:18.127

10

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

edited Oct 26 '18 at 12:34

answered Nov 20 '10 at 17:05

hollsk

3,124
24
34

+ > and < wins this one. Looks right and is semantically correct. – Arve Systad Nov 20 '10 at 17:08
3

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 Nov 20 '10 at 17:18

score 4 · Answer 3 · answered Jul 26 '12 at 08:11

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

    }

answered Jul 26 '12 at 08:11

QuyLT

41
1

1

Can you explain the answer so people can understand what you did to fix it ? – Cristiano Fontes Oct 10 '12 at 18:49

score 4 · Answer 4 · answered Nov 20 '10 at 17:06

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>

answered Nov 20 '10 at 17:06

tshao

1,127
2
8
23

Eric · Answer 5 · 2011-10-19T17:38:18.883

2

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>

edited Oct 19 '11 at 17:38

answered Nov 20 '10 at 22:00

Eric

95,302
53
242
374

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...) – monojohnny Oct 19 '11 at 11:00
1

@monojohnny: Which bits are going to be dynamic? Are you really likely to want to change the `padding` or `margin` dynamically? – Eric Oct 19 '11 at 17:40

score 1 · Answer 6 · edited Nov 20 '10 at 22:05

1

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.

edited Nov 20 '10 at 22:05

Eric

95,302
53
242
374

answered Nov 20 '10 at 17:04

bkilinc

989
2
13
28

use special chars instead of < > (like & lt; > ). – bkilinc Nov 20 '10 at 17:05
you can change display properties of pre but it is not what pre for. pre is for preformatted text. – bkilinc Nov 20 '10 at 17:07
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 Nov 20 '10 at 17:21

score 1 · Answer 7 · answered Nov 20 '10 at 21:19

1

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.

answered Nov 20 '10 at 21:19

Ms2ger

15,596
6
36
35

score 0 · Answer 8 · answered Nov 20 '10 at 17:06

0

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

answered Nov 20 '10 at 17:06

Sotiris

38,986
11
53
85

1

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 Nov 20 '10 at 18:01

score 0 · Answer 9 · edited Nov 20 '10 at 22:04

0

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.

edited Nov 20 '10 at 22:04

Eric

95,302
53
242
374

answered Nov 20 '10 at 17:06

GolezTrol

114,394
18
182
210

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 Nov 20 '10 at 17:20

HTML
tag causes linebreaks

9 Answers9

Linked

HTML tag causes linebreaks

9 Answers9

Linked

HTML
tag causes linebreaks