防止所选文字行之间出现空格

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>