Why Does Google Chrome Always Add Space After Selected Text

Why does Google Chrome always add space after selected text?

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.

Extra space added to last justified inline-block element in Chrome

This case is a perfect candidate for using the flexbox layout. You can keep your existing code as is but add the following lines. This will keep your original code as a fallback for browsers which don't support flexbox. Since Chrome does support the current flexbox syntax all the way back to version 21, this should safely eliminate your problem.

Codepen Demo

Modified CSS

#container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

#message {
  flex: 1;
}

You'll need to vendor prefix the code for comprehensive browser support, but since you're only worried about the bug in Chrome this is not strictly necessary (unprefixed support goes back to version 29, although version 27 still holds .54% of global market share, so you might throw -webkit- in to be on the safe side).

Since flexbox can be a little confusing to use at first, if you haven't used it before there is a good overview with examples at CSS-Tricks. I don't have enough reputation points to post more than two links but just Google "css tricks flexbox".

Hope this helps.

CSS issue: Chrome adds 3px extra margin-right to text field

Although, this may be dependent on the browser version, Chrome generally have these CSS rules for the input element:

-webkit-appearance: textfield;
background-color: white;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
padding: 1px;
border: 2px inset;

and these for the input, textarea, keygen, select, button:

text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em 0em 0em 0em;
font: 13.3333px Arial;

and this for input, textarea, keygen, select, button, meter, progress:

-webkit-writing-mode: horizontal-tb;

So, this does not relate to the browser stylesheet rules.

If you add a white-space like

• space
• tab
• newine ( This is your case )

between them, a gap will appear.

Depending on the situation, you can use either of the following methods to get rid of the gap:

• Add a negative margin-left
• Use float

• Remove the whitespace between the elements, which can be done:

  1- Put theme in one line

  <input type="text"><input type="text"><input type="text">
  

  2- Removing the space ( Don't worry, it is correct! :) )

  <input type="text"><
  input type="text"><
  input type="text">
  

  3- Use HTML comments

  <input type="text"><!--
  --><input type="text">
  

  I suggest you to use the Number 1 method (Put theme in one line), but either will work.

Extra whitespace between HTML elements in Chrome

One option would be to reset the styles in your CSS.

You can add this to your default style sheet.

* {
padding: 0;
margin: 0;
}

If you need a little more information on resets there is a good run down here : http://perishablepress.com/a-killer-collection-of-global-css-reset-styles/

Extra padding only in Chrome

Try adding line-height: 0; to the div:

#mailing div {
    line-height: 0;
}

Try also adding:

#mailing .moduletable {
    display: table;
}

Updated jsfiddle: http://jsfiddle.net/BbJhE/12/

Chrome 53 introduces unwanted spacing in LI elements

Can't say if this is a quirk or a spec change, but a workaround would be to set the list-style to outside, and instead of padding use a left margin:

.tutorial .sidebar .navmenu-default .navmenu-nav.dropdown-menu>li.active>ul>li {
      list-style-position: outside;
}
.tutorial .sidebar ul {
    margin-left: 10px;
    padding: 0;
}

Chrome CSS issue, non-removable whitespace at the bottom of text in span

Since <span> is not a block element by default, add display:inline-block; to make it work.

<span style="line-height:22px; padding: 0px; margin:0px; border-radius: 3px; vertical-align:middle; background-color: #cc0000; color: #fff; font-size: 22px; display:inline-block;">100%</span>