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

Question

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?

Answer 1

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>