以下代码段显示了如何使文本无法选择.遗憾的是,如果您在Chrome中选择文本,则在复制和粘贴未选文本时也会粘贴.
是否有任何方法可以进行大量的写作,包括无法选择的内容,您可以复制和粘贴,而且没有任何不可选择的内容被粘贴？
.hide {
color: orange;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<div>Hello this text is selectable <span class="hide">but I'm not</span> You can select me all day!</div>
http://codepen.io/regan-ryan/pen/XdodGx
编辑：这个问题确实看似可能重复,看到有关于这个主题的12个问题.但是,经过广泛的搜索,我找不到我的特殊问题,所以我认为这是一个更具体的问题标题,这是值得的.
解决方法
更多解决方法：您可以利用事实,CSS生成的内容对于剪贴板(*)是不可见的,因此对于带有文本的空跨度移动到某个属性,您在视觉上与请求的clibpoard行为具有相似的结果：
[data-text] {
color: orange;
}
[data-text]::after {
content: attr(data-text);
}
<div>Hello this text is selectable <span data-text="but I'm not"></span> You can select me all day!</div>
http://codepen.io/myf/pen/jqXrNZ
如果不关心可访问性/ SEO,这可能是解决方案.在其他情况下,它可能是HTML中的真实文本,但移动到脚本“按需”属性.
(*)更新：如评论中所述(
How to disable text selection highlighting using CSS?)Internet Explorer实际上涉及剪贴板中CSS生成的内容.哎呀.
