title: html exclude text from clipboard copy
body: <p>I have a span inside another span. I would like to allow the user to be able to select the text from the parent span, but not the child one.</p>
  
  <p>Note: <code>user-select</code> (family) does not work. It prevent the selection to start or end in this area, but the text is still in the end clipboard result if I surround it with the select in the text from the parent span.</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;head&gt;
  &lt;style&gt;
    .hole-hint {
      display: inline-block;
      position: absolute;
      bottom: 45%;
      font-size: 12px;
      color:rgb(255, 0, 0);
      background-color:rgba(255, 225, 225, 0.5);
      z-index:1;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -o-user-select: none;
      user-select: none;
    }
    .hole {
      padding-top: 7px;
      position: relative;
      background-color:#EEEEEE;
    }
    &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;span&gt; this is the parent text&lt;span class="hole"&gt;&lt;span class="hole-hint"&gt;no copy&lt;/span&gt;&lt;/span&gt;and this is text on the other side   &lt;/span&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>