避免预标签内的空白 [英] Avoid the margin inside pre tag

问题描述

如何避免 pre 标记内的空白：

 < ; p>一些文字< / p> 
 
< pre> 
< code> 
一些代码
< / code> 
< / pre> 
 
< p>一些文字< / p> 
 
< style> 
 pre {
 background-color：rgb（255,247,229）; 
 border：1px纯红色; 
} 
< / style> 
  

当前输出：

期望的输出：

目前的解决方案是手动删除标记中的缩进，如下所示。然而，据我所知，这不是最佳的方式。

 < pre> 
< code> 
一些代码
< / code> 
< / pre> 
  




解决方案

您可以尝试更改<$ c对于< pre> 标记，从 pre 到<$ c $> >空格 c $ c> pre-line 。

pre-line 空白的序列已折叠。线条以换行符打断，位于< br> ，并根据需要填充线框。

在 white-space 的更多信息CSS / white-spacerel =nofollow> MDN 。

< p> ;一些文字< pre> <代码>一些代码< / code>< / pre>< p>一些文字< / p>

$ b

How to avoid the margin inside pre tag:

<p>Some text</p>

<pre>
    <code>
        Some code
    </code>
</pre>

<p>Some text</p>

<style>
pre {
    background-color: rgb(255,247,229);
    border: 1px solid red;
}
</style>

The current output:

The desired output:

The current solution is to manually remove the indentation in the markup, like shown below. However, as I understand, it is not the optimal way.

<pre>
    <code>
Some code
    </code>
</pre>

解决方案

You can try changing the default value of white-space for <pre> tag from pre to pre-line.

pre-line Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

Read more about white-space on MDN.

pre {
  background-color: rgb(255, 247, 229);
  border: 1px solid red;
  white-space: pre-line;
}

<p>Some text</p>
<pre>
  <code>
    Some code
  </code>
</pre>
<p>Some text</p>

这篇关于避免预标签内的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！