使html文本不可选择 [英] make html text unselectable

问题描述

首先，我来过这里如何使HTML文本不可选择
但这并不能解决我的问题((JavaScript版本效果很好，但是我需要使用HTML和CSS来实现，我不能使用JavaScript )我使用了推荐的CSS，但是请看一下我的演示将鼠标从[从此处拖动]移至[到此处]，您将看到文本为仍然可以选择.
有什么办法使它真正无法选择?
谢谢

First, I have been here How to make HTML Text unselectable
But that doesn't solve my issue, (the JavaScript version works well, but I need to make it using HTML and CSS, I cannot use JavaScript) I used the recommended CSS, but look at my DEMO drag the mouse from [drag from here] to [to here] you will see that the text is still selectable.
any way to make it really unselectable?
Thanks

推荐答案

在查看了此问题之后，想到了另一种防止用户在查看页面时选择文本的方法，基本上是在目标文本上设置了掩码:

After reviewing this problem, Came to mind another method to prevent the user from selecting text while viewing the page, basically, setting up a mask over the target text:

您的小提琴已更新此处！

示例:

CSS

.wrapTxt {
  position: relative;
}
.wrapTxt .mask {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

HTML

<p class="wrapTxt">
  This is my text! My text is mine and no one Else's!
  <span class="mask"></span>
</p>

这里的原理很简单(小提琴)，在文本上有一个block元素，占据了所有内容它的包装空间.

The principle here is simple (Fiddle), have a block element over the text, occupying all of it's wrapper space.

如果您需要选择一行而不选择下一行，那么倒台是一项艰巨的任务.另外，无法选择"文本上的链接也将不可用.

The downfall is a hard implementation if you need one line to be selectable and the next one not. Also, links on the "not selectable" text will not me available.

最后的提示:

用户始终可以通过查看源代码或通过从网页的顶部到底部拖动鼠标来解决此问题.

The user can always go around this, either by looking at the source code, or by dragging the mouse from top to bottom of the webpage.

这篇关于使html文本不可选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！