html - 防止所选文本行之间出现空白

Question

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

考虑这个片段:

.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>

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

如何在不更改字体或间距的情况下删除它们？

Answer 1

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

.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>