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

2023年12月29日 254次阅读

我正在开发一个有一些代码的网站,我想写一下：

<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隐藏或删除第一个换行符/空白行,以便我可以在我的代码中保留换行符,而不会在我的所有代码部分的开头出现空白行.

最佳答案 我认为可行的唯一方法是：

只使用一点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,这样的文字不会出现在屏幕上)

白空间失败

任何其他方式,比如在< pre>上播放白色空格组合.和 标签不会得到任何所需的东西.

点赞