Prevent white space between selected text lines

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?

Consider this snippet:

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

enter image description here

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

728x90

1 Answers Prevent white space between selected text lines

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>

1 weeks ago