Question

当从下面的HTML显示文本时，两行之间有一个很大的空间。我如何删除该空间？

<pre style="font-family:arial;color:191970;font-size:10px;line-height:.1;">
Line 1 with one tab at the end
</pre>
<pre style="font-family:arial;color:191970;font-size:10px;line-height:.1;">
Line 2 with one tab at the end
</pre>

为什么我使用代码？ 我在每行的末尾放置2个标签，这就是我使用此标签的原因

Answer 1

您在两行中使用了两个<pre/>标记。所以你需要管理<pre/>标签的边距和填充。 line-height还不够。并记住在line-height中设置em并在文档级别设置初始字体大小和行高。

Answer 2

默认情况下，pre标签显示为block，这就是原因。为了克服这个问题，请使用CSS中的代码

 pre 
    {
    display: inline;
    }

Answer 3

<!-- here is a complete example pretty print with more space between lines-->
<!-- be sure to pass a json string not an json object -->
<!-- use line-height to increase or decrease spacing between json lines -->

  <style  type="text/css">
    .preJsonTxt{
      font-size: 18px;
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 200%;
    }
    .boxedIn{
      border: 1px solid black;
      margin: 20px;
      padding: 20px;
    }
  </style>

<div class="boxedIn">
     <h3>Configuration Parameters</h3>
     <pre id="jsonCfgParams" class="preJsonTxt">{{ cfgParams }}</pre>
</div>

<script language="JavaScript">
$( document ).ready(function()
{
 $(formatJson);

 <!-- this will do a pretty print on the json cfg params      -->
 function formatJson() {
    var element = $("#jsonCfgParams");
    var obj = JSON.parse(element.text());
    element.html(JSON.stringify(obj, undefined, 2));
}
});
</script>

HTML：如何从PRE标记中删除行间距

3 个答案: