Why does Google Chrome always add space after selected text?

As suggested by @brendan, its because of newLine characters.

Try creating a dummy HTML page with following html and try,

<html>
  <body>
    <h1>Hello world</h1>
  </body>
</html>

and then add another element and try again

<html>
  <body>
    <h1>Hello world</h1>
    <span>Test</span>
  </body>
</html>

I have run many tests between Chrome and Firefox to figure out a common pattern for their display, selection, and copying methods.

Google Chrome

Google Chrome ignores all of the inner and outer element whitespace characters in the HTML except if they are inside the text. All whitespace characters in between text is displayed as a singular space character but the actual value of the character is retained. This is for both elements that have the inline or the block display styles.

Every single element except for the last element of the body element, displays a space at the end when it is selected by using triple click or drag selection. This space is different based on the display style of the elements.

A block display element results in 2 CRLF characters appended to it when the text is copied while a inline display element only ever results in 1 CRLF. The whitespace characters are maintained between copy and paste but are limited to only one character.

Firefox

Firefox ignores outer element whitespace but has interesting results with inner element whitespace characters. All whitespace characters are converted to spaces with except for the starting character with a limit of one whitespace between each non-whitespace character. Only the last whitespace is shown and selected.

Triple click selection and copying of the text results in different values based on the display style of that element.

Inline Display

There is always a space before and after the text that is copied regardless of what the elements contains. Every whitespace character is removed.

Block Display

Whitespace characters before the text are retained as-is and the ending whitespace character is converted to a space.


So to answer your question, this is all based on how the browsers implement the display, selection, and copy methods. It will different between browsers and I would not recommend adding CSS, JS, and HTML hacks. From the tests, I believe the selection has nothing to do with the new line between the elements as removing the newline does not fix the extra space selection.


Resolve in Chrome from the version 69.0.3497.81


You have probably seen this google group already but otherwise it might help:

How to double-click a word and not select or highlight an extra space after the word

It's not actually for the same problem but it seems there is a difference in the behavior between different OS.

I can't test it now, but maybe there is the same behavior for your concern.