css控制页面文字不能被选中user-select:none;

现象：html中可能有些地方不想让用户复制文字，或是用a标签做了个点击按钮，点快的时候文字会被选中，很丑，这个时候可以使用下面的方案禁止文字选中。

原因：鼠标点快了文字会被选中。

解决方案：不同的浏览器设置的内容不一样，user-select不是一个W3C的标准，浏览器的支持不完成，需要对不同的浏览器进行调整。

body{

-moz-user-select:none;/*火狐*/

-webkit-user-select:none;/*webkit浏览器*/

-ms-user-select:none;/*IE10*/

-khtml-user-select:none;/*早期浏览器*/

user-select:none;

}

user-select有2个值（none表示不能选中文本，text表示可以选择文本）

IE6-9还没发现相关的CSS属性

//IE6-9

document.body.onselectstart=document.body.οndrag=function(){

returnfalse;

}

举个栗子：在做APP时经常用到下面的~~

html,body{

-webkit-touch-callout:none ;

-webkit-text-size-adjust:none ;

-webkit-tap-highlight-color:transparent ;

-webkit-user-select:none ;

}

转载于:https://www.cnblogs.com/codebook/p/5924073.html

css控制页面文字不能被选中user-select:none;相关推荐

页面文字请使用css进行控制,css控制页面文字不能被选中user-select:none;
CentOS 7 配置静态IP 1.查看MAC地址 2.修改/etc/sysconfig/network-scripts/ifcfg-[第一步中红框内的文字] 3.添加和修改内容如下: 4.修改/et ...
如何解决html页面文字无法被选中，进而复制粘贴复用
问题描述:在使用vue-admin系统的时候,有时候比较懒想复制页面的文字测试一下某某功能,突然发现鼠标无法选中文字,进行复制.那么问题来了,为何无法选中? 原因:css3 UI规范中新增的一个功能u ...
html介绍和CSS控制页面
请结合前面的总述观看,后续内容持续开发. 注意:HTML 编码格式和解码格式要一致. 标签分类:块级元素和行内元素. 行内元素:对应标签内容仅在一行中 <span> &l ...
css控制页面打印（分页、屏蔽不需要打印的对象）
样式: <style media="print"> .Noprint { DISPLAY: none;} .PageNext { ...
css实现页面文字不换行、自动换行、强制换行
强制不换行:div{ white-space:nowrap; } 自动换行: div{ word-wrap:break-word; word-break:normal; } 强制英文单词断行 : d ...
译-使用Scroll Snapping实现CSS控制页面滚动
特别声明,本文翻译自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文,受限于译者能力,译文或存在不足,欢迎大家指出.如需转 ...
【CSS】设置文字不能被选中解除限制
方法一:JS if (typeof(element.onselectstart) != "undefined") { // IE下禁止元素被选取 element.onselects ...
文字开头隐藏css,浅析CSS隐藏页面文字的几种方式总结
方式一:text-indent:-9999px 不多说,ext-indent负值为最常用方法,然问题有三: 1.较大的负值有性能问题,例如新浪/腾讯微博提交按钮的-9999em,大概12~16万像素的 ...
网页编程html link,Web--CSS控制页面（link与import方式区别）详解
先了解: [1] "Table"和"DIV"这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面 ...

css控制页面文字不能被选中user-select:none;

css控制页面文字不能被选中user-select:none;相关推荐

最新文章

热门文章