选择仍然复制到剪贴板
我刚刚发现了CSS的user-select属性。 我希望找到一种方法让人们将显示的结果复制到页面上，而不需要复制标题（以及其他一些内容）。 每个浏览器在尝试选择内容时都有点不同。 但我一直在Chrome中进行测试。 小提琴代码
HTML
<div>
<span class="no-select heading">Heading 1 - can't select it</span>
<p>This text you can select & copy.</p>
<span class="no-select heading">Heading 2 - can't select it</span>
<p>This text you can select & copy.</p>
</div>
CSS
.no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
结果：
对我来说，看起来他们只能复制突出显示的文本。 但是，当复制高亮显示的内容时 - 它的heading 2 ，但没有复制heading 1 。 为什么是这样？
This text you can select & copy.
Heading 2 - can't select it
This text you can select & copy.
我并不认为这一切令人惊讶， user-select属性是阻止用户选择元素的内容。 基本用户界面模块没有提到复制内容的行为。 我会想象这就是为什么不同浏览器之间存在差异。
MDN还指出：
控制选择的外观（仅）。 这对实际选择操作没有任何影响。
这个WebKit Bugzilla报告中的评论也说了同样的话。
我有同样的问题，并找到以下解决方案。 https://danoc.me/blog/css-prevent-copy/
HTML：
<p data-pseudo-content="Lorem Ipsum"></p>
CSS：
[data-pseudo-content]::before {
content: attr(data-pseudo-content);
}