Text of element with CSS "user-select=none" gets copied if it is located between elements

user_8406284 0
Viewed 1644

Check out this snippet:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>
<p>
  Selectable text.
</p>

Now triple-click on the first row and than copy. Paste it anywhere and you'll be able to see that the "Unselectable text." gets copied as well. This happens only on Chrome. Does anyone know why this is happening and what ways there are to fix it?

textselection google-chrome css
2 Answers

This should be fixed in latest chrome, but just in case, you can use pseudo elements to add text that definitely can't get selected or copied in any browser (i.e. line numbers in code listings). Here's a trick to use it for dynamic content:

.line::before {
  content: attr(data-line-number);
  margin-right: 8px;
}
<div><span class="line" data-line-number="1"></span>line 1</div>
<div><span class="line" data-line-number="2"></span>line 2</div>
<div><span class="line" data-line-number="3"></span>line 3</div>

user_15374030

If anyone interests, adding this element after the selectable element will fix the issue:

.copy-blocker
{ position: absolute; user-select: text; height: 100%; }
<div class="copy-blocker"></div>
user_84062840
Related