经常在做一些鼠标拖动处理的时候,经常会不知不觉把文字选中,接着拖动选中的文字,会触发有些浏览器的搜索命令。所以,在会被拖动区域的文字,应该设置成无法选中,这样就不会触发浏览器的搜索命令了。CSS3有属性已经支持这个功能了
user-select有两个值:
none:用户不能选择文本
text:用户可以选择文本
需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行调整
body{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; }
IE6-9还没有相关的CSS属性
//IE6-9 document.body.onselectstart = document.body.ondrag = function(){ return false; }
有时候,用户随便输入了一串信息,全是字母,并且是连续的,没有空格,没有标点符号,很长的一串
然后显示到页面的时候,这串文字并不会自动换行,因为系统认为这是一个单独的单词
这时候,可以使用这个属性,及时再长的单词,也会乖乖的换行
word-break: break-all; //属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象 word-wrap: break-word; //属性用来标明怎么样进行单词内的断句
当文本内容太长,又不想换行显示的时候,出现...
overflow: hidden; white-space: nowrap; //强制让文本一行显示 text-overflow: ellipsis;
需要让用户无法选中某元素,比如说,不想让用户右键保存网站的图片,就可以在图片上设置此属性
pointer-events:none