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，因此无法用其他HTML标记替换这些<span>。
另外，当用户单击它们时，我无法使用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 ...的列表中添加更多标签名称。

选择文本时防止<span>标签成为标签

1 个答案: