选择文本时防止 <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 列表中添加更多标签名称.....