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

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>

为什么我要使用“<pre>”标签？ 我在每行末尾加入了2个制表符，因此我使用这个标签。

- Jame

---

我没有看到任何大的空格。我看到两行紧挨在一起：http://jsfiddle.net/LbnZ4/ - rob mayoff

一样啊。你用的是哪个浏览器？ - ddrace

@robmayoff 我将这个 HTML 分配给 JLabel，我也打了标签，但有人把它删除了。 - Jame

Answer 1

你正在使用两个<pre/>标签用于两行文本。因此，你需要管理<pre/>标签的边距和填充。仅使用line-height不足够。请记得将line-height设置为em值，并在文档级别上设置初始字体大小和行高。

- Chamika Sandamal

Answer 2

默认情况下，pre标签以块形式显示，这就是原因。要克服这个问题，请在CSS中使用以下代码：

pre {
    display: inline;
}

 pre 
    {
    display: inline;
    }

- SCC

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>

- Louie