Question

为什么谷歌浏览器在用3次鼠标点击选择文字时总会在行尾添加空格？

您认为我们可以使用CSS或JavaScript来删除它吗？（不好主意，但只是试图避免这件事）

块：

当我在文字上点击3次时：

一个gif示例：

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

Answer 1

我在Chrome和Firefox之间进行了很多测试，以找出显示，选择和复制方法的常用模式。

谷歌浏览器

Google Chrome会忽略HTML中的所有内部和外部元素空白字符，除非它们位于文本中。文本之间的所有空白字符都显示为单个空格字符，但保留字符的实际值。这适用于具有内联或块显示样式的两个元素。

除了body元素的最后一个元素之外的每个元素，当使用三击或拖动选择选择它时，在末尾显示一个空格。根据元素的显示风格，这个空间是不同的。

当复制文本时，块显示元素会在其中附加2个CRLF字符，而内联显示元素仅导致1个CRLF。空白字符在复制和粘贴之间保持不变，但仅限于一个字符。

火狐

Firefox忽略外部元素空白，但内部元素空白字符的结果很有趣。所有空白字符都转换为空格，除了起始字符，每个非空白字符之间限制为一个空格。只显示和选择最后一个空格。

根据该元素的显示样式，三次单击选择和复制文本会产生不同的值。

内联显示

无论元素包含什么，复制的文本前后总会有空格。每个空白字符都被删除。

屏蔽显示

文本前的空格字符按原样保留，结束的空格字符转换为空格。

所以要回答你的问题，这完全取决于浏览器如何实现显示，选择和复制方法。浏览器之间会有所不同，我不建议添加CSS，JS和HTML黑客。从测试中，我认为选择与元素之间的新行无关，因为删除换行不会修复额外的空间选择。

Answer 2

正如@ brendan所建议的那样，因为newLine字符。

尝试使用以下html创建虚拟HTML页面并尝试

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

然后添加另一个元素并重试

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

Answer 3

您可能已经看过这个谷歌群组，但它可能有所帮助： https://productforums.google.com/forum/#!topic/chrome/zQKXGA95I4k

它实际上并不是针对相同的问题，但似乎不同OS之间的行为存在差异。

我现在无法对其进行测试，但也许您的担忧会有相同的行为。

Answer 4

从Chrome版本69.0.3497.81中解析

为什么Google Chrome会在所选文字后始终添加空间？

4 个答案:

谷歌浏览器

火狐