18910140161

如何禁止选择css3实现文本内容

顺晟科技

2021-06-28 17:25:31

176

今天在浏览网页的时候发现有些网页上的内容无法使用鼠标来进行选中,就深入的研究了下,发现是使用CSS的 user-select 属性来现实的,就记录一下。

css user-select: 属性介绍

user-select:规定用户用鼠标在页面上是否可以选中文字、图片等

值:

none:禁止用户选中。

text:对用户的选择没有限制。

all:目标元素将整体被选中。

css user-select 属性使用方法

例:user-select 属性在各大浏览器中的写法

user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;
//火狐浏览器
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;
//谷歌浏览器
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all;
//IE
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: all;

例:CSS 禁止某个元素中的内容被选中

HTML示例代码:

<style>
    .m{
        -ms-user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }
</style>
<div class="m">
    <p>我是来自飞鸟幕鱼博客的一段文字!</p>
    <p>我的博客地址为:http://feiniaomy.com</p>
</div>
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航