防止所选文本行之间出现空白答案

【问题标题】：Prevent white space between selected text lines防止所选文本行之间出现空白
【发布时间】：2018-12-06 09:25:59
【问题描述】：

为什么当用户在单个元素中选择多行文本时，选择背景中没有间隙，但是如果我将每一行放在单独的元素中，就会出现白线？

考虑一下这个sn-p：

.line {
  font-family: 'Courier';
  font-size: 14px;
  line-height: 17px;
  white-space: pre;
}

<div class="line">Text 1
Text 2</div>
<div class="line">Text 3</div>
<div class="line">Text 4</div>

如果选择所有文本，前两行“合并”在一起，但白线出现在第三和第四行之前，即使所有四行中实际文本之间的距离相同？

如何在不改变字体或间距的情况下摆脱它们？

【问题讨论】：

标签： html css

【解决方案1】：

您可以尝试使用line-height: 1; 或line-height: 1.1;，但您的文本会失去可读性。我通常为 14px 左右的字体大小设置 line-height: 1.6;。

.line {
  font-family: 'Courier';
  font-size: 14px;
  line-height: 1;
  white-space: pre;
}

<div class="line">Text 1
Text 2</div>
<div class="line">Text 3</div>
<div class="line">Text 4</div>

【讨论】：