【转】使用CSS 禁止文本选择
禁止文本选择
有些时候我们需要对网页的文本内容进行简单的屏蔽,可以使用user-select这个CSS特性来实现这个需求。
--不过需要注意一点,就是通过CSS设置是可以被浏览器禁用从而导致禁用功能失效o(╥﹏╥)o--
body{
-webkit-touch-callout: none; /* Android 和 IOS 可以让在移动设备上的触摸后弹出失效。*/
-webkit-user-select: none; /* Chrome,Safari,和 Opera */
-khtml-user-select: none; /* KHTML浏览器(比如:Konqueror) */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer */
user-select: none; /* 因为各个带有前缀的版本已经包含主流浏览器,所以不带前缀的user-select是可以省略的 */
}
复制代码
需要特别注意的就是:
user-select并不是W3C规范中标准的CSS特性。尽管user-select通过添加浏览器前缀有很好的浏览器支持
其他需要注意的地方:
user-select是有问题并且是不稳定的。有些时候你依然还是可以选择文本,特别是当你从没有被屏蔽掉文本选择的文本的那部分开始选择。
使用全选快捷键有些时候还是会把屏蔽文本选择(Win:Ctrl+A/Mac:Cmd+A)。这种情况你可以在IE11中清楚的了解到。 这不是一种万全的保证文本不被选择的策略。CSS能够很容易被屏蔽。这种技巧依赖于非标准的CSS特性,这意味着未来对这个属性的可持续支持上面存在着很大的不确定性。
屏蔽掉文本选择是很恼人的。我会在渐进提升的过程中使用这个技巧:只有当它可以提高使用支持这个user-select特性的浏览器和设备的用户的用户体验的时候才使用它。但是,我绝不会把它设置成一个大范围的CSS选择器像全部选择器(*)或者body.
这个user-select特性可能会让你的样式表失效。如果遵循标准对你来说非常重要,使用这个属性会在你使用规范测试比如说CSS Validation Service的使用出现问题
转自:segmentfault.com/a/119000000…
转载于:https://juejin.im/post/5aefcfa0f265da0b752807fc
【转】使用CSS 禁止文本选择相关推荐
- html禁止文本选择,[译]用CSS来禁止文本选择
有些时候我们需要禁止网页的部分文本不能被选择.你可以使用user-select这个CSS特性来实现这个需求. 举例 下面是一个使用了disable-selection类的样式规则,当它作用于一个HTM ...
- css禁用选中文本_使用CSS禁用文本选择突出显示
css禁用选中文本 Introduction: 介绍: Texts are the most fundamental elements of any websites or web pages, th ...
- html中文本不自动换行,CSS禁止文本自动换行代码
使用CSS样式 white-space:nowrap 可以定义某个区域内的内容是否可自动换行,默认是可以的.如果设置的值为 nowrap 将禁止自动换行,如上图所示.内容超过窗体可显示的区域外时将在浏 ...
- css禁止文本或文字图标点击被选中
在做项目时,经常会用到一些文字图标,比如我们做轮播图时,可能就会用到阿里巴巴字体图标库中的图标进行切换轮播图.这时候我们不希望点击会被选中.我们就可以利用下面的css3中属性来禁止. 例如下面这种情况 ...
- html 禁止选中div,css禁止选中_css禁止鼠标选择文本代码
摘要 腾兴网为您分享:css禁止鼠标选择文本代码,鱼乐贝贝,优衣库,小天才,三一外语等软件知识,以及wps免,杂志阅览器,360os系统,红袖标,flash卸载器,饿了么首单,卡布西游,论文翻译软件, ...
- 如何禁用文本选择突出显示
对于充当按钮的锚(例如,"堆栈溢出"页面顶部的" 问题" ," 标签" ," 用户 "等)或选项卡,是否存在CSS标准方 ...
- css禁止鼠标复制文本的属性:user-select
禁用用户选中 user-select禁止复制页面的文本: 使用JavaScript的方式,代码如下: document.documentElement.style.webkitUserSelect=& ...
- CSS Repeater - 交错显示行背景色 table行鼠标进入事件特效 禁止文本换行
1. 禁止文本换行的CSS: white-space:nowrap; strict mode下在IE7和FF中都正常,以前IE用的word-break.word-wrap属性对FF无效. 2. ...
- 前端开发css禁止选中文本
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
最新文章
- LeetCode Search in Rotated Sorted Array II
- 《图谋职场——最经济的图形沟通》 专题讲座圆满成功
- windows(xshell)免密码登录
- 小米 android 刷4.0,小米如何刷MIUI4.0系统教程
- 爬虫简单入门:第一个简单爬虫
- JVM笔记(JVM内存+垃圾回收器)详解
- [导入]九个笑话能告诉你九个人生的道理
- 2021 年云原生技术发展现状及未来趋势
- system类的 静态方法可以启动垃圾回收器。_跟小伟一起学习类加载机制
- 遗传算法中的转盘算法
- 22. Django进阶:文件上传
- 双击图片不放大手机php,Android_Android App中实现可以双击放大和缩小图片功能的实例,先来看一个很简单的核心图片 - phpStudy...
- Python 面向对象 计算长方体、四棱锥的表面积和体积
- 爱了爱了!从草根到百万年薪程序员的十年风雨之路,小白也能看明白
- sourceTree无法注册解决
- Python 儒略日和公历互转代码
- MSI和MSI-X对比(五)
- 如何查阅NLP资料 转自https://blog.csdn.net/qq_27009517/article/details/80841146
- html5怎么写资料年月日,公文写作中的日期书写格式
- 开发的阅读文档来源灵感