2

I'm trying to prevent certain sections of a block of text from being selected, while other parts can be.

.unsel {
  font-weight: bold;
  user-select:none;
}
<p>
  Blah ljaskldfjalskdfjalksdfja kjalskd jfalksdjf askdfaskdskflaskjdflkas jflaskjflaksjlaksjfalksfj ksj fskfjaskl jkj slaj sasjflkasjf ks jaks fjaslkf j <span class="unsel">But you can't select me.</span> kajsdflkajs dsaslkf jalsk fjalks fjsl kfjs <span class="unsel">Or me, so there.</span>
</p>

When you highlight the text, the parts that can't be selected are not highlighted, but if I copy the text, the non-highlighted parts will still be copied.

I saw this CSS-Tricks article that says that in Chrome, the text is not hightlighted but can still be selected. So how can I prevent the text from being copied?

Yaakov Ainspan
  • 3,598
  • 3
  • 23
  • 45
  • Possible duplicate? https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css – Barney Chambers Jul 14 '17 at 00:01
  • 1
    @BarneyChambers, the answers there all focus on preventing all selecting, I want to have some bits unselectable and prevent copying in the unhighlighted parts. – Yaakov Ainspan Jul 14 '17 at 00:04
  • If you are using IE 9 or under, then it may not work. – Joshua Jul 14 '17 at 00:07
  • 1
    Not sure if this is a bug or a feature... https://bugs.webkit.org/show_bug.cgi?id=80159 and https://bugs.chromium.org/p/chromium/issues/detail?id=147490. Looks like there isn't a spec for the property, so different browsers are handling it different. – Michael Coker Jul 14 '17 at 00:07
  • 1
    I'm using chrome, that's the whole point of the question: it only doesn't work in chrome – Yaakov Ainspan Jul 14 '17 at 00:07

0 Answers0