使用 <pre><code> 标签隐藏/删除 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>，都不会获得所需的任何结果。