html - 从空白 : pre element 中删除前导空白

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 和 Google Chrome 上试过了。

我想删除 block 开头的额外行。显然，我知道换行符的来源，我可以使用 <mystyle>int main() {反而。如果我使用 <pre>而不是 <mystyle> , 没有额外的换行符，所以我的自定义样式也可以做到这一点吗？

Answer 1

查看 answer to this very similar question :

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

不过，可能需要现代浏览器。