Menu
Why does Google Chrome always add a space at the end of a line when selecting a text with 3 mouse clicks?
Do you think we can do something using CSS or JavaScript to remove it? (Bad idea but, just trying to avoid this thing)
The block :
When I click 3 times on the text :
A gif example :
<body> <div> <h1>Example Domain</h1> <p>This domain is established to be used for illustrative examples in documents. You may use this domain in examples without prior coordination or asking for permission.</p> <p><a href="http://www.iana.org/domains/example">More information...</a></p> </div> </body> 
402
In addition to these, cached images and cookies can also be found in Chrome's folder. All of this data can add up, eventually causing Chrome to take up more storage space than most users desire. The reason Chrome stores so much data on your device is to provide you with a smoother browsing experience.
Open the Chrome browser on your computer, type chrome://flags in the address bar, and hit Enter. Search for “Reader Mode” in the text box at the top and enable the flag titled “Enable Reader Mode.” After enabling the flag, click the “Relaunch” button at the bottom of the screen to apply the changes.
I have run many tests between Chrome and Firefox to figure out a common pattern for their display, selection, and copying methods.
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 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.
135
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
