CSS实现禁止文字选中

E10平台预览第四版中包含了对 CSS3 新属性 -ms-user-select 的支持,Web 开发人员可以利用这一新属性轻松精确的控制用户可以在网站上选择哪些文本。

user-select:none | text | all | element

  • text – 可以选择文本
  • element – 可以选择文本,但选择范围受元素边界的约束
  • none – 不可以选择文本
  • auto – 如果该元素包含可编辑的文本(如输入元素或可编辑内容的元素),则可以选择文本。否则,元素内容是否可选择由父节点的值决定。
 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 6   <title>主页</title>
 7   <style type="text/css">
 8       .row-of-icons {
 9         -webkit-user-select: none; /* Chrome all / Safari all */
10         -moz-user-select: none; /* Firefox all */
11         -ms-user-select: none; /* IE 10+ *//* No support for these yet, use at own risk */
12         -o-user-select: none;
13         user-select: none;
14         }
15   </style>
16 </head>
17 <body>
18 <div class="row-of-icons" onselectstart="return false;" unselectable="on">选择我试试,你会发现怎么也选择不到我,哈哈哈哈</div>
19 </body>
20 </html>
时间: 2024-10-06 12:15:57

CSS实现禁止文字选中的相关文章

CSS 禁止文字选中

现象:html中可能有些地方不想让用户复制文字,或是用a标签做了个点击按钮,点快的时候文字会被选中,很丑,这个时候可以使用下面的方案禁止文字选中. 原因:鼠标点快了. 解决方案: 不同的浏览器设置的内容不一样,user-select不是一个W3C的标准,浏览器的支持不完成,需要对不同的浏览器进行调整. body{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: non

CSS如何改变文字选中状态下的颜色

CSS如何改变文字选中状态下的颜色:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在默认状态先一般选中的文本颜色是白字蓝底的,不过可以通过CSS进行设置.当然浏览器的支持度还是不够好,IE8和IE8以下的浏览器不支持,但是其他主流浏览器都支持此属性,不过随着浏览器的升级,这个也不会是问题.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta n

CSS禁止文字选中

-moz-user-select:none;/*firefox*/ -webkit-user-select:none;/*webkit*/ -ms-user-select:none;/*ie10*/ -khtml-user-select:none;/*早期浏览器*/ user-select:none; IE10以下浏览器无相关css设定 //IE6-IE9 document.body.onselectstart=document.body.ondrag=function(){ return fa

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

html中可能有些地方不想让用户复制文字,或是用a标签做了个点击按钮,点快的时候文字会被选中,很丑,这个时候可以使用下面的方案禁止文字选中. 给该元素设置css即可:user-select:none; <p style="user-select:none">不让选中的文字</p> 原文地址:https://www.cnblogs.com/djjlovedjj/p/9929063.html

网页中禁止文字复制

禁止鼠标选中文字 用js可以在页面中写 onselectstart="return false" 比如说 <div style="width:200px;height:200px;" onselectstart="return false">这里面的文字是不能被鼠标选中的</div> 现在我的问题是 要把 onselectstart="return false" 写进class中,怎样实现呢? 我不想要

CSS改变默认文本选中的颜色的方法

请选择本页面文本看看:http://hovertree.com/h/bjaf/38hq6y9d.htm 一般情况下在网页里的文本我们用鼠标选中的时候都是蓝色的,这个默认颜色也是可以更改的,本文我们学习如何使用CSS3实现改变默认文本选中的颜色.以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色. 一.关于浏览器文字选中颜色:在CSS3的爸爸 妈妈还没有相亲认识的时候,要改变页面上文字选中后的背景色以及文字颜

css实现标题文字过长截取...

css实现网页中文字过长截取... title class应该这样写: .title{ width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} 说明: 1.宽度一定要设置,可以根据实际需求调整. 2.white-space:nowrap是禁止文字折行. 3.text-overflow表示当文本溢出时是否显示省略标记,有两个值: clip:不显示省略标记(...),而是简单的裁切. ellipsis:当对

CSS文本与文字

CSS中长度与颜色 CSS中的文字属性 CSS中的文本属性 14.1 CSS中长度与颜色 长度单位                 说明 in                英寸 cm                公分 mm                公里 cm                以目前字体高度为单位 ex                以小写字母高度为单位(大部分不支持) pt                1pt/72英寸 pc                1pc/12p

css隐藏多余文字显示...

<style> .ellipsis{width:100px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;} .ellipsis:hover{overflow: visible;} </style> <div class="ellipsis">css隐藏多余文字并用...表示未完的内容</div> 使用到的css属性 width:***, overflow:hi