Question

我有一些使用

的文字

white-space: pre-wrap;

它看起来不错，但我想增加文本中下一行的间距。有没有办法做到这一点？

示例：

Hello. 
World.

预期结果：

Hello.

World.

Answer 1

不是真的。您可以使用line-height，但这也会在第一行的顶部添加间距。您可以尝试使用负上边距和相对位置来更改整个块的位置。

white-space: pre-wrap;                
line-height: 30px;
position: relative;
top:-15px;

希望这有帮助。

Answer 2

将元素上的边距归零，如果它还没有display: block，则将code放在上面... 设置整个块的行高... 然后在其上设置:: first-line，并为所需空间提供适当的行高。使用小数部分可以进一步降低第一行高度。请参阅我的代码段。

我更喜欢使用pre标记来处理这类事情，因为white-space: pre;标记似乎在文本编辑器中的标记上存在缩进（标签或空格）问题，以及与这些标记不一致更大或更小的单位。

因此，要在使用white-space: pre-wrap;或code时控制行高，您将获得一致的结果（Chrome，Safari，FF，IE10），并显示已屏蔽，保证金为零{ {1}}代码：

＆＃13;

* { margin: 0; }
  

code {
 display: inline;
 white-space: pre;
 line-height: .9em; /* doesn't work */
}
code.block {
  display: block;
  white-space: pre;
  line-height: .9em; /*  works */
}
code.block-doubled {
  display: block;
  white-space: pre;
  line-height: 2em; /*  works */
}
code.block-doubled::first-line {
  display: block;
  white-space: pre;
  line-height: .9em; /*  works */
}

＆＃13;

<pre>
  * { margin: 0; }
 </pre>
  <code>
  code {
  display: inline;
  white-space: pre;
  line-height: .9em; /* doesn't work */
  }
  </code>
  <code class="block">
  code {
  display: block;
  white-space: pre;
  line-height: .9em; /* works */
  }
  </code>
  <code class="block-doubled">
  code {
  display: block;
  white-space: pre;
  line-height: 2em; /* works */
  }
  </code>

＆＃13;

有没有白色空间的方式：预包装;文字下一行间距可以更大？

2 个答案: