如何确保只能选择预期的文字？

Question

我的目标是创建行（行号）行：

• 行号与相应的行对齐，即使每个“行”超过其父元素的宽度并换行到新的物理行
• 仅选择文字，而不是行号
• 在每行内部和之前保留空格

我有一个片段可以在特定浏览器上实现其中一些目标：

.code { counter-reset: line; }
.line { counter-increment: line; white-space: pre-wrap; }
.line:before { content: counter(line) " - "; }

<div class="code">
  <div class="line">Line 1</div>
  <div class="line">  Line 2</div>
  <div class="line">Line 3</div>
</div>

问题在于：

• 一切都在Chromium
• 除了第三个目标外，所有内容都在Firefox中运行 - 由于某种原因，该行开头的空格被截断
• 除了第二个目标外，一切都在IE中有效 - 行号包含在选择中

（我无法访问Mac，所以我不了解Safari。我太懒了，无法测试Opera。）

有没有办法在所有常见的浏览器中使用它？

Answer 1

简短的回答：你可能无法获得IE＆amp; FF的行为与Chrome相同，甚至相互之间。

此时Opera本质上就是Chrome（即使使用Google的引擎，也不使用Webkit），所以请考虑在Chrome运行时进行测试。

我发现更长的信息...
这个问题揭示了其他两个浏览器的两个不良行为：

1. MSIE：
   1. 它本地在::before伪元素中选择生成的内容。根据我的理解（以及其他浏览器的理解）规则说它不应该：它不是DOM的一部分，它是由CSS生成的。
   2. HTML属性unselectable="on"通常会让IE停止选择文字。但是，如果您在IE中打开this question，则会看到您可以选择＆＃34;不可选择的＆＃34;文字，如果你在＆amp;之前的街区开始继续拖过它，或右键单击框内＆amp;选择＆＃34;全选＆＃34;然后复制。所以它甚至不是轻微的防弹。此外，属性不会帮助您保护伪元素。
   3. 有CSS user-select:none（以及供应商前缀），但在使用IE浏览器的JSFiddle中尝试时，我认为没有效果。
   4. IE的最后一个选项是Javascript：onselectstart="return false"，这是剪辑优惠券的完美电锯。
2. 火狐：
   1. 它不会复制格式，即使CSS指示显示应该显示空白。我看到Bugzilla issue这个可追溯到 2001（？！?? !!），过去14年的评论争论为什么应该保留pre白空间到剪贴板，但Mozilla大多忽略它。
   2. 我有一个附加组件作为纯文本复制，但我相信它会从Firefox发起的副本中剥离标记，因此附加组件也不会收到空白区域。
   3. 有一个about:config option告诉Firefox双击选择它时是否占用一个单词旁边的空格，但这里完全没用。我提到它只是为了排除它。 :(