html - 使用 标签隐藏/删除 html 代码段的第一个换行符/空行

Question

我在一个有一些代码的网站上工作，我想写:

<pre><code>
line 1
line 2
</code></pre>

但是这样会在开头产生一个空行作为输出

[A Blank line in here that I don't want]    
line 1
line 2

我知道这样写不会有空行，但我喜欢这样写。

<pre><code>line 1
line 2
</code></pre>

请建议我该怎么做，如果可能的话，使用 CSS 来隐藏或删除第一个换行符/空行，这样我就可以在我的代码中保留换行符，而不会在我所有代码部分的开头出现空行.

Answer 1

我认为唯一可行的方法是:

仅使用一点 JavaScript:

const code = document.querySelectorAll("pre code");
[...code].forEach(el => el.textContent = el.textContent.replace(/^\n/,''));

pre {border: 1px solid #ddd;}

<pre><code>
1 line
2 line

4 line
</code></pre>

<pre><code>1 line
2 line

4 line
</code></pre>

<pre><code>

2 line. (Keep intentional newline above)

4 line
</code></pre>

CSS

另一种非常糟糕的方法是只使用 CSS pre:first-line { font-size:0; } -- 但这真的很糟糕，因为它迫使您始终将第一行留空(否则由于 font-size: 0，此类文本不会出现在屏幕上)

white-space失败

任何其他方式，比如玩 white-space <pre> 上的组合和 <code>标签不会得到任何想要的东西。