html – 使文本无法选择和不可复制(webkit,同时被可复制文本包围)

概述以下代码段显示了如何使文本无法选择.遗憾的是,如果您在Chrome中选择文本,则在复制和粘贴未选文本时也会粘贴. 是否有任何方法可以进行大量的写作,包括无法选择的内容,您可以复制和粘贴,而且没有任何不可选择的内容被粘贴？ .hide { color: orange; -webkit-touch-callout: none; -webkit-user-select: none; -k 以下代码段显示了如何使文本无法选择.遗憾的是,如果您在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 >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生成的内容.哎呀.

总结

以上是内存溢出为你收集整理的html – 使文本无法选择和不可复制(webkit,同时被可复制文本包围)全部内容，希望文章能够帮你解决html – 使文本无法选择和不可复制(webkit,同时被可复制文本包围)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。