Remove leading whitespace from whitespace: pre element

Question

I want to use a custom style for code snippets in my blog. I defined the following style:

mystyle {  
  background: #C3FFA5;  
  border: solid 1px #19A347;  
  color: #191919;  
  display: block;  
  font-family: monospace;  
  font-size: 12px;  
  margin: 8px;  
  padding: 4px;  
  white-space: pre;  
}

I use it as follows:

<mystyle>
int main() {
    cout << "Hello World" << endl;
}
</mystyle>

This gives the following output. I have tried on Firefox and Google Chrome.

Output

I want to remove the extra line at the start of the block. Obviously, I understand where the newline comes from, and that I can use <mystyle>int main() { instead. If I use <pre> instead of <mystyle>, there is no extra newline, so is it possible to do this with my custom style too?

Sorry if the title does not describe the problem well, please feel free to change it. — Masked Man, Jun 28 '13 at 13:29
What are you using to process your custom inputs, can you show us some code? — Jaay, Jun 28 '13 at 13:32
Why don't you just style the `
` tag, or am I missing something? — naththedeveloper, Jun 28 '13 at 13:33
possible duplicate of [How to make another tag behave exactly like the pre tag using CSS?](http://stackoverflow.com/questions/5825227/how-to-make-another-tag-behave-exactly-like-the-pre-tag-using-css) — Jonathan Naguin, Jun 28 '13 at 13:36
@FDL I want to use several styles, for example, one for console output, another for wrong code, etc. — Masked Man, Jun 28 '13 at 13:37

score 26 · Answer 1 · edited May 23 '17 at 12:09

26

Check out the answer to this very similar question:

.mystyle:first-line {
    line-height: 0px;
}

Might require a modern-ish browser, though.

edited May 23 '17 at 12:09

Community

1
1

answered Aug 08 '15 at 19:39

jwd

10,837
3
43
67

score 17 · Answer 2 · answered Jun 16 '16 at 02:30

17

Adjust margin-top to whatever line-height you have set.

.text {
    margin-top: -1em;
    white-space: pre-line;
}

This works for FF too, which :first-line hack can't fix.

answered Jun 16 '16 at 02:30

tom10271

4,222
5
33
62

score 17 · Answer 3 · answered Jan 10 '18 at 09:07

17

When we use white-space: pre-wrap, then when the page renders, it also takes space from your html file. So suppose we have:-

<div style="white-space:pre-wrap"> <!-- New Line -->
   <!-- 2 space --> This is my text
</div>

The text will render in this way:-

<leading line>     
<2 spaces >This is my text

Hence we should HTML like this:-

<div style="white-space:pre-wrap">This is my text</div>

answered Jan 10 '18 at 09:07

prashantsahni

2,128
19
20

Dude, your answer is just awesome. At first I did not understand what you were trying to explain.. you should have explained a bit.. – Thameem Apr 22 '21 at 17:43

score 8 · Accepted Answer · answered Jun 28 '13 at 13:42

8

Add the style to the <pre> tag, using a class. For example (trying to keep it simple here).

<pre class="console">
    // Some code here to be styled.
</pre>

<pre class="some-other-style">
    // Some code here to be styled.
</pre>

Then your CSS looks like this:

pre.console {
    color: #fff;
    background-color: #000;
}
pre.some-other-style {
    color: #f00;
    background-color: #fff;
}

If it doesn't do what you want then I'm confused by your question, just comment and I'll remove the answer.

answered Jun 28 '13 at 13:42

naththedeveloper

4,503
6
36
44

4

This doesn’t really address the questuon as asked, since it says: “If I use `

` instead of ``, there is no extra newline, so is it possible to do this with my custom style too?” In practical terms, however, the answer points to the right direction. There are special parsing rules for `pre` elements, causing an initial line break to be ignored. Imitating this for other elements is kludgy (it could be done using a negative top margin, but then you would need to assume that the content really begins with a line break).

– Jukka K. Korpela Jun 28 '13 at 18:54

score 3 · Answer 5 · edited May 24 '20 at 19:09

This is for you who want to remove the trailing space only from the first line of the formatted output

instead of writing the code like this

<pre> 
    This is my code  </pre>

write it like this

<pre>This is my code</pre>

or in case you are using a <div> tag as shown below

<div style="white-space:pre-wrap"> 
    This is my code 
</div>

write it like this

<div style="white-space:pre-wrap">This is my code</div>

score 2 · Answer 6 · answered Jun 28 '13 at 13:43

Code formatting is at the essence here, make sure each line start at the first character of that line:

<pre class="code">
int main() {
    cout << "Hello World" << endl;
}
</pre>

The following CSS will suffice:

pre.code
{
    background: #C3FFA5;  
    border: solid 1px #19A347;  
    color: #191919;  
    display: block;  
    font-family: monospace;  
    font-size: 12px;  
    margin: 8px;  
    padding: 4px;
}

Read this article on whitespace, and the following on how to 'fight it'. Although the last article discusses whitespace between inline elements, the formatting solution relates to your issue.

Good. How to remove trailing white space line? – Mesut Akcan May 24 '20 at 19:04 — Mesut Akcan, May 24 '20 at 19:04

score 1 · Answer 7 · answered Jun 28 '13 at 13:46

1

How about

<mystyle>into main() {
    // ...
}</mystyle>

No white space before or after...

answered Jun 28 '13 at 13:46

rodrigo-silveira

12,607
11
69
123

The OP already stated that they know they can do this: _"Obviously, I understand where the newline comes from, and that I can use `int main() {` instead."_. This is not applicable... – War10ck Jun 28 '13 at 13:50
2

@War10ck Too bad the OP is looking for the impossible. A newline is the first character within the element and `whitespace: pre` is honoring it. – cimmanon Jun 28 '13 at 14:20

score 1 · Answer 8 · answered Feb 22 '17 at 13:21

1

Just fix your template, man. Thats easiest way:

<mystyle>int main() {
  cout << "Hello World" << endl;
}</mystyle>

answered Feb 22 '17 at 13:21

Zorin V.

11
2

What is the point of posting an answer which was already posted over 3 years ago, and which I have already mentioned in my own question? – Masked Man Feb 22 '17 at 13:26
I had same issue and found a better way to solve it. Maybe someone else will read this. – Zorin V. Feb 24 '17 at 10:59
Yeah but that is already mentioned in the question as well as another answer. – Masked Man Feb 24 '17 at 12:18

score 1 · Answer 9 · answered Feb 17 '21 at 15:37

1

Not a pure CSS solution but works for me:

<script>
  document.querySelectorAll('pre').forEach((e) => {
    e.innerHTML = e.innerHTML.trim();
  })
</script>

answered Feb 17 '21 at 15:37

A. Genedy

578
4
11

This answer really fixes the first line thing instead of hacking the style. ```window.addEventListener('DOMContentLoaded', function() { console.log('La página ha terminado de cargarse!!'); document.querySelectorAll('code').forEach((e) => { e.innerHTML = e.innerHTML.trim(); }) });``` – DiegoJArg Nov 30 '22 at 01:35

score 0 · Answer 10 · answered Jan 11 '22 at 05:09

0

This solution works for me when dealing with white-space: pre-line.

Add span inside white-space element.

<p class="whitespace-pre-line">
   <span>Your text goes here</span>
</p>

answered Jan 11 '22 at 05:09

kusiaga

673
1
7
18

Remove leading whitespace from whitespace: pre element

10 Answers10

Linked