css - 防止 <span> 标签在选择文本时变成制表符

Question

所以，我有一个广泛使用 html 表格的旧网站。
在表格单元格中，通常有一个 <span>带有一些属性的标签。我无法更改这些表的结构。
当有人想要选择单元格中的所有文本时，如果他们不能绝对确保仅选择可见字符，则 <span>包含文本的标记被转换为制表符。因此，如果他们将文本粘贴到某处，它将以制表符开头。

例子:

table {
  margin-left: 230px;
  margin-top: 10px;
  border: 1px solid black;
}
td {
  padding: 5px;
  border: 1px solid black;
}
p, textarea {
  margin-left: 50px;
  width: 500px;
  min-height: 20px;
}

<table><!-- (comments to remove whitespace between tags)
  --><tbody><!--
    --><tr><!--
      --><td><span>first cell</span></td><!--
      --><td><span>hi there</span></td><!--
    --></tr><!--
  --></tbody><!--
--></table>
<p>Select "hi there" from the end to the begginning, by going past it, and paste it below, you will see a tab character at the beginning.<br>
(There can also be a new-line character before "first cell")</p>
<textarea></textarea>

基本上我想要的是实际复制的文本正是视觉上突出显示的文本。至少如果选择是在单个单元格内。
可以用 css 做到这一点吗？

同样，我无法更改 HTML 结构，只能更改 css，所以我无法替换那些 <span> s 与其他一些 HTML 标记。
另外，我不能使用 Javascript 来做一些事情，比如当用户点击它们时将单元格“转换”为输入，这样他就可以精确地选择文本。以防万一有人会考虑这个解决方案(这很酷，但我做不到)。

编辑:嗯，我在发布问题后不久就找到了一个合理的解决方案(橡皮鸭工作有延迟......)。解决方案是在表格单元格中添加一个填充。制表符甚至与 <span> 没有任何关系。 .当您的选择进入另一个单元格时，它会出现。
但是，我仍然想知道是否有任何方法可以用 css 删除这种空白。

Answer 1

你可以试试

html{ 
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none; 
}
span,p,textarea,div,br,td{
    -o-user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    user-select: text;
}

您可以在 span,p,div 列表中添加更多标签名称......