复制时如何排除部分文本

Question

我试图使一些文本不可复制，我的目的不是阻止人们从我的网站复制文本，而是使其更易于使用。我有一个包含文件大小的文件列表，但我只想复制文件名而不是文件大小。

到目前为止，我尝试了几种不同的方法，但没有奏效，我已经设法通过 CSS 用户选择使文本不可选择，但当我选择两行或更多行时，我仍然可以复制文件大小。

我只是尝试使用按钮来防止复制，但这不起作用，有什么想法吗？

<a href="http://10.10.10.1/links/file.doc"file.doc</a>
 <button type="button" disabled="disabled" id="filesize">6 MB</button><br \>

目标浏览器是 Mac 上的 Safari，因此在最新 Safari 上运行的实验性 CSS3 或 HTML5 命令就可以了。

（感谢 mvds 提供建议的标题和一种解决方案）

Answer 1

完成这项工作的一个相当老套的方法是使用 ::before 或 ::after 伪元素来使用 css content: 属性插入文本。

HTML：

<a href="http://10.10.10.1/links/file.doc">file.doc</a>  
<button type="button" disabled="disabled" id="filesize"><i></i></button>

CSS：

button i:before {
 content: '6 MB';
}

优点： 它有效：即使选择多行，它也不会复制到剪贴板。

缺点：伪元素需要特别注意 CSS 样式，因为它们是插入到正常文档流之外的。对多个元素使用 content: 属性还需要自定义标签或内联 CSS。

Answer 2

丑陋的黑客警报：创建 2 个版本的文本，一种有尺寸，一种没有尺寸，其他方面相同，并将它们放在重叠的 div 中，没有尺寸的版本具有更高的 z-index。

更好的解决方案，也许不是跨浏览器，是添加一个

<input type="text" value="(6 MB)" style="border:0; ...">

我建议重命名问题“复制时如何排除文本部分”，因为就目前情况而言，听起来您正在寻找平均无望的复制保护方案，虽然这个问题很有趣。

Answer 3

使用跨度（或任何文本容器）和 unselectable 属性，如下所示：

<a href="http://10.10.10.1/links/file.doc">file.doc</a>
<span unselectable="on">6 MB</span>

这并不适用于所有情况，但由于您有特定的浏览器目标，因此这将非常适合您的情况： ）

为了轻松支持更多浏览器，您可以在其中添加一些 CSS，首先定义一个类，如下所示：

.unselectable { 
  user-select: none; 
  -moz-user-select: none; 
  -khtml-user-select: none; 
}

然后也分配它，如下所示：

<a href="http://10.10.10.1/links/file.doc">file.doc</a>
<span class="unselectable" unselectable="on">6 MB</span>