Why is space shown in browsers when in source code '\n' is used?

Question

While working on my project I've found out that \n in html source is displayed as space between these 2 lines in browsers. For example,

a
b

in browsers is displayed as a b. How can I avoid this "space" without removing line-break? The result I want is ab right next to each other — not on separate lines, not with a space between them.

I generate quite big form on fly using php, for readability, I use PHP_EOL that is the same as \n, but in browsers appears extra white-spaces. I want to get rid of them.

@Oded — But PLB is asking how to remove the whitespace. Not reduce it from a new line to a space. — Quentin, May 16 '12 at 17:49
@Quentin - No, OP is asking how to get the two items to display on different lines when rendered in the browser. — Oded, May 16 '12 at 17:52
@Everyone. Perhaps OP can be more specific? With each comment I read I change my mind about what he/she wants. — Holf, May 16 '12 at 17:53
@Holf I generate quite big form on fly using php, for readability, I use `PHP_EOL` that is the same as `\n`, but in browsers appears extra white-spaces. I want to get rid of them. — Leri, May 16 '12 at 17:53
@PLB — So, just to make things crystal clear, you want it to render `ab`, not `a b` and also not `a` followed by a new line then `b`? — Quentin, May 16 '12 at 17:55
@Quentin Yes, I want to render `ab` instead of `a b` and in html source have them on different lines. — Leri, May 16 '12 at 17:57
That's simply not the way HTML works. You might be able to do some *visual* rendering hacks, but the data will still have the whitespace. — snemarch, May 16 '12 at 18:16

T.J. Crowder · Accepted Answer · 2012-05-17T03:06:12.970

Updated answer:

In the comments below you've said that the result you're looking for is "ab" right next to each other, with no space or line break at all between them.

If "a" and "b" are really text, I don't believe you have any option, you have to remove the linebreak if you want them next to each other. (I realize you said you didn't want to do that, I'm just saying, I don't think you have a choice.)

If "a" and "b" are elements (you've said you're outputting a big form), you can play games with negative CSS margins, but it gets ugly fast. Or the old trick of moving that line break into a tag, e.g.:

<input name="a" type="text"
><input name="b" type="text"
>

The line break within the tag is not displayed (because it's in a tag, not text).

The link below on inter-element whitespace may also help, depending on your overall markup; basically there are times the browser will disregard whitespace between elements, so you might be able to adjust things slightly to make it do that.

You've said you're using it for readability. I suppose another option, although it's really verbose, is to put the line break in a comment:

form field here<!--
-->next form field here<!--
-->next form field here

...but again, quite verbose (and probably not doing much for readability).

Your best bet is what you said you don't want: Remove the linebreak. :-)

Original answer:

(From when it was unclear that you wanted "ab" right next to each other; just about everyone thought you wanted to have the line break shown.)

Why is space shown in browsers when in source code '\n' is used?

Because the HTML standard says that all sequences of whitespace characters (other than inter-element whitespace) are treated as a single space. So for HTML, a newline, space, tab, carriage return, and formfeed are all exactly equal: They're displayed as a space.

How can I avoid this "space" without removing line-break?

There are a few ways:

You can use a br element:
```
a<br>b
```
You can put a and b in separate containers that use block display (both p and div do by default, and you can use CSS to apply display: block to others).
```
<p>a</p>
<p>b</p>
```
or
```
<div>a</div>
<div>b</div>
```
etc
If you really want that newline to be treated as a line break, you can use a pre element, which has special handling of pre-formatted text
```
<pre>a
b</pre>
```
...and you can apply that same sort of handling to other elements using CSS's white-space style (values pre, pre-wrap, and pre-line).

I've edited my question. I don't want that `a` and `b` were displayed on separated lines in browser. — Leri, May 16 '12 at 18:00
@PLB: You want to see "ab" in the output? Nothing between them at all? — T.J. Crowder, May 16 '12 at 18:02
I don't like this solution, but right now it helps me a lot. I'll put my line-breaks in tags. thank you very much. — Leri, May 16 '12 at 18:18
I like a
b. I like the simplicity of it. Interestingly this answers a question that the person posting the question actually asked though he intended to remove the line break (apparently his question was not phrased correctly). But this answers a question that someone starting out with Javascript might come up with very early in their experience with playing with it. — shivesh suman, Apr 02 '18 at 19:51

Rizstien · Answer 2 · 2012-05-16T17:54:24.647

0

to use space in html use</br> rather than \n. \n is used in code for line break.

edited May 16 '12 at 17:54

answered May 16 '12 at 17:47

Rizstien

802
1
8
23

I think that he meant a simple line break with `\n`. – Samy Dindane May 16 '12 at 17:48
1

`
` or `
`, but not `` – T.J. Crowder May 16 '12 at 17:57

score 0 · Answer 3 · edited May 23 '17 at 10:09

0

\n may not be the only character you need for new lines to 'display'.

Depending on platform \n may give you a newline in code only or in both code and in visual output. Some platforms require \r to have a visual carriage return. You may even need \r\n in some cases to get your required output.

Further reading on SO > What is the difference between \r and \n?

edited May 23 '17 at 10:09

Community

1
1

answered May 16 '12 at 18:05

Scratch that, I just saw you updated your question and that's not what you're after. – May 16 '12 at 18:07

score 0 · Answer 4 · answered May 16 '12 at 18:07

If you don't want whitespace in your rendered output, don't put it in your input - simple as that. Alternately, generate wonderfully readable xml as an intermediary step, andvprocess it with xslt into html that doesn't have the unwanted whitespace.

N.b: user is adviced toinsert appropriate <sarcasm> tags in this answer ;)

score -3 · Answer 5 · edited May 28 '12 at 19:23

-3

Surround them with some inline markup like this

<span>a</span
><span>b</span>

edited May 28 '12 at 19:23

dflemstr

25,947
5
70
105

answered May 16 '12 at 17:46

n8wrl

19,439
4
63
103

1

New acronym: DVWE = Down-Vote-Without-Explanation. Thanks for that! – n8wrl May 16 '12 at 17:48
2

To be fair, the explanation is quite simple. It doesn't work, the space is still there. – Holf May 16 '12 at 17:49
1

@n8wrl: I'm going to guess that the person down-voted you because your answer does nothing to preserve new-lines (or rather, represent them properly). – Andrew Moore May 16 '12 at 17:50
1

Explanation: `span` doesn't *swallow* whitespaces and line breaks. – Samy Dindane May 16 '12 at 17:51
I guess I misunderstood his question. I thought he wanted to get rid of the whitespace. Now it seems he wants to KEEP the linebreak too. Oh well – n8wrl May 16 '12 at 18:03
@n8wrl: Actually, he wants to get rid of the whitespace entirely, just get "ab" with neither a space nor a linebreak. Your `span` thing doesn't do that *either*, but the question was far from clear originally. – T.J. Crowder May 16 '12 at 18:12

Why is space shown in browsers when in source code '\n' is used?

5 Answers5

Related