body { -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; /* Standard */ }
以上CSS代码可以应用于整个页面的body元素,使用不同的前缀可以兼容不同的浏览器,而”user-select: none”则是标准的写法。
如果只想防止单个元素内的文字被选中,可以针对该元素添加CSS代码:
.element { -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+/Edge */ user-select: none; /* Standard */ }
在双击时,文字被选中可能会干扰用户的浏览体验,如阅读文章时不小心选中了一部分文字改变了突出重点的阅读体验,因此使用CSS代码防止文字被选中是一个好的解决方案。