从空格中删除前导空格:pre元素

Question

我想在我的博客中使用自定义样式代码片段.我定义了以下样式:

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

我用它如下:

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

这给出了以下输出.我试过Firefox和谷歌Chrome.

我想删除块开头的额外行.显然,我理解换行符的来源,而我可以使用<mystyle>int main() {.如果我使用<pre>而不是<mystyle>,没有额外的换行符,那么我也可以使用自定义样式吗？

Answer 1

看看这个非常相似的问题的答案:

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

但是,可能需要现代浏览器.

Answer 2

将margin-top调整为您设置的任何行高.

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

这也适用于FF,其中:一线黑客无法修复.

Answer 3

当我们使用white-space: pre-wrap，那么当页面呈现时，它也会从您的 html 文件中占用空间。所以假设我们有：-

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

文本将以这种方式呈现：-

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

因此，我们应该像这样 HTML：-

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

Answer 4

<pre>使用类将样式添加到标记.例如(试图在这里保持简单).

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

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

然后你的CSS看起来像这样:

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

如果它没有做你想要的,那么我对你的问题感到困惑,只是评论,我将删除答案.