8

我刚刚发现了user-selectCSS 的属性。我想找到一种方法让人们复制页面上显示的结果，而不复制标题（以及其他一些东西）。每个浏览器在尝试选择某些内容时都会有所不同。但我一直主要在 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.
4

2 回答 2

4

I don't really think its all that surprising, the user-select property is to prevent a user from selecting an elements' content. Nowhere in the Basic UI Module does it mention the behaviour regarding copying content. I would imagine this is why there are variations among different browsers.

MDN also states:

Controls the appearance (only) of selection. This does not have any affect on actual selection operation.

The comments in this WebKit Bugzilla report also say the same thing.

于 2013-06-07T17:18:35.973 回答
2

我遇到了同样的问题，并找到了以下解决方案。 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);
}
于 2017-12-16T21:08:21.713 回答