css3如何实现文本内容禁止选中的方法

发布时间：2022-12-31 17:21:28 来源：网络

.

有些时候，我们需要一种危机，来激发我们自身的潜能，唤醒我们内心深处被掩藏已久的人生激情，来实现人生的最大价值。时刻是没有声音的锉刀。早上好！

今天在浏览网页的时候发现有些网页上的内容无法使用鼠标来进行选中，就深入的研究了下，发现是使用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>

到此这篇关于css3如何实现文本内容禁止选中的方法就介绍到这了。有人说，青春仿佛是朵素洁的昙花，来不及铺张来不及遐思，甚至来不及弥补欠缺和瑕庛，就那么匆匆地谢了。更多相关css3如何实现文本内容禁止选中的方法内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章: