您现在的位置是:首页 > 正文

html 文字不可选择,css文字不可选怎么做?

2024-04-01 01:51:02阅读 1

css设置文字不可选使用user-select属性,user-select属性设置或检索是否允许用户选中文本,下面我们来看一下使用user-select属性设置文字不可选的方法。

61d78bd5383fa704e5add346be3477de.png

css设置文字不可选示例:

Creating non-selectable text using CSS

div {

margin-bottom: 20px;

padding: 10px;

background: rgba(10%, 10%, 10%, 0.3);

-moz-border-radius: 15px;

border-radius: 15px;

}

div#d2 {

-moz-user-select: none;

-khtml-user-select: none;

user-select: none;

font-style: italic;

}

文字可以选择
文字不可选

效果图:

b8e0a459e6d5751db8a4db5bdf0be67d.gif

css设置文字不可选使用user-select属性,下面我们来看一下user-select属性的介绍:

语法:user-select:none |text| all | element

默认值:text

适用于:除替换元素外的所有元素

继承性:无

动画性:否

计算值:指定值

取值:none:文本不能被选择

text:可以选择文本

all:当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。

element:可以选择文本,但选择范围受元素边界的约束

说明:

设置或检索是否允许用户选中文本。

IE6-9不支持该属性,但支持使用标签属性 onselectstart="return false;" 来达到 user-select:none 的效果;Safari和Chrome也支持该标签属性;

直到Opera12.5仍然不支持该属性,但和IE6-9一样,也支持使用私有的标签属性 unselectable="on" 来达到 user-select:none 的效果;unselectable 的另一个值是 off;

除Chrome和Safari外,在其它浏览器中,如果将文本设置为 -ms-user-select:none;,则用户将无法在该文本块中开始选择文本。不过,如果用户在页面的其他区域开始选择文本,则用户仍然可以继续选择将文本设置为 -ms-user-select:none; 的区域文本;

对应的脚本特性为userSelect。

网站文章

  • WTM+LayUI 子表批量上传文件

    WTM+LayUI 子表批量上传文件

    一个带有的Model,实现批量新增。

    2024-04-01 01:50:56
  • 使用PyQt5创建和编写.qrc资源文件

    在PyQt5中,可以使用.qrc资源文件来管理应用程序中的来管理应用程序中的静态资源,如图像、样式表和其他文件。一旦创建和编写.qrc文件,我们需要将其编译为Python代码,以便在应用程序来管理应用...

    2024-04-01 01:50:50
  • 全面盘点‘’一网打尽‘’,架构师的必备技能(微服务、高并发、大数据、缓存等中间件)是如何炼成的?

    全面盘点‘’一网打尽‘’,架构师的必备技能(微服务、高并发、大数据、缓存等中间件)是如何炼成的?

    现代的互联网体系结构面临着异常庞杂的服务拓扑,如何合理地进行服务治理是架构师领域核心的一个命题。业务领域、基础架构领域、组织结构领域,如何做服务治理?服务治理是如何一步步演变进化的?我们未来又将面临哪...

    2024-04-01 01:50:42
  • 用单例封装 SharedPreferences

    自己封装的 SharedPreferences,很简单的封装,直接上代码public class SPManager { private static final String ACCOUNT = "account"; private static final String PASSWORD = "password"; private st

    2024-04-01 01:50:17
  • pta 乙级 1012 数字分类 (20 分)

    pta 乙级 1012 数字分类 (20 分)

    给定一系列正整数,请按要求对数字进行分类,并输出以下 5 个数字:A1​= 能被 5 整除的数字中所有偶数的和; A2​= 将被 5 除后余 1 的数字按给出顺序进行交错求和,即计算n1​−n2​+n...

    2024-04-01 01:50:11
  • C++中struct与class的区别

    从语法上,在C++中(只讨论C++中)。class和struct做类型定义时只有两点区别: (一)默认继承权限。如果不明确指定,来自class的继承按照private继承处理,来自struct的继承按照public继承处理; (二)成员的默认访问权限。class的成员默认是private权限,struct默认是public权限。 除了这两点,class和struct基本就是一个东西。语法上没有任何

    2024-04-01 01:50:03
  • OSPF综合实验

    OSPF综合实验

    要求:配置area0r3r4r5r6r7配置MGREr3r5r6r7配置环回area1r1r2r3area2r6r11r12area3r7r8r9area4r9r10rip开启ospfr1r2r3r4r5r6r7r8r9r10r11r12

    2024-04-01 01:49:37
  • 微服务中的分布式事务管理 - 2/2 Saga异步模式

    微服务中的分布式事务管理 - 2/2 Saga异步模式

    在这篇文章中,我们看到了什么是微服务中事务管理的异步模式,还探索了Saga模式及其两个变体,即基于Choreography和基于Orchestrator的模式。我们深入了解了这两种模式,然后讨论了它们...

    2024-04-01 01:49:29
  • 长篇阅读做题技巧

    长篇阅读做题技巧

    六级长篇阅读解题办法

    2024-04-01 01:49:24
  • com.fasterxml.jackson.databind.exc.InvalidDefinitionException: Cannot construct instance of `co

    今天在开发的过程中发现偶然发现报了一个这个错,于是经过一番研究,终于发现原因:原来是在用springboot的过程中,没有构造方法导致的。解决方法: 直接加上@NoArgsConstructor 注解 即可解决。(前提需要引入lombak插件)觉得有用的麻烦请采纳一下,谢谢。...

    2024-04-01 01:48:58