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

问题描述：

当用户在单个元素中选择多行文本时，选择背景没有空格，但是如果将每行放在单独的元素中，则会出现白线吗?

How come when a user selects multiple lines of text inside a single element, the selection background has no gaps in it, but if I put each line in a separate element, white lines appear?

请考虑以下代码段:

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

如果选中了所有文本，则前两行会合并"在一起，但是即使所有四行中实际文本之间的距离相同，白线也会出现在第三行和第四行之前?

If all the text is selected, first two lines are "merged" together, but white lines appear before third and fourth lines, even though the distance between actual text in all four lines is identical?

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

How do I get rid of them without changing font or spacing?

答

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

You could try with a line-height: 1; or line-height: 1.1; but your text loses in readibility. I usually set a line-height: 1.6; for font sizes around 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>

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

相关推荐