User-Select still copies to clipboard

Question

I just discovered the user-select attribute of CSS. I was wanting to find a way for people to copy the displayed results on a page, without copying the headings as well (and a few other things). Each browser is a bit different when they attempt to select something. But I've been testing mainly in Chrome. Fiddle Code

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;
}

The results:

To me, it looks like they would only be able to copy the highlighted text. However, when copying what is highlighted - it does have heading 2, but it did not copy heading 1. Why is this?

This text you can select & copy.

Heading 2 - can't select it
This text you can select & copy.

Answer 1

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.

Answer 2

I had the same problem and found the following solution. 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);
}