Remove leading whitespace from whitespace: pre element - html

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.
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?

Answer 1

Check out the answer to this very similar question:
.mystyle:first-line {
line-height: 0px;
}
Might require a modern-ish browser, though.

Answer 2

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.

Answer 3

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>

Answer 4

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.

Answer 5

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>

Answer 6

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.

Answer 7

How about
<mystyle>into main() {
// ...
}</mystyle>
No white space before or after...

Answer 8

Just fix your template, man. Thats easiest way:
<mystyle>int main() {
cout << "Hello World" << endl;
}</mystyle>

Answer 9

Not a pure CSS solution but works for me:
<script>
document.querySelectorAll('pre').forEach((e) => {
e.innerHTML = e.innerHTML.trim();
})
</script>

Answer 10

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>