CSS实现文字禁止选择
墨初 Web前端 1879阅读
CSS样式表中有一个user-select属性,此属性的值如果设置为 none 的话,可以禁止DIV元素中的文字被鼠标选中。下面具体的使用方法,供大家参考。
CSS user-select 属性
user-select:规定是否选取元素中的文本。
语法:
user-select: auto|none|text|all;
属性值:
| 值 | 描述 |
|---|---|
| auto | 默认。如果浏览器允许,则可以选择文本。 |
| none | 防止文本选取。 |
| text | 文本可被用户选取。 |
| all | 单击选取文本,而不是双击。 |
CSS 禁止元素中的文本被选中
CSS禁止元素中的文本被选中,只需要将元素的CSS的user-select属性的值设置为 none 即可!
例:
<style>
.div1,.div2{
padding: 10px;
font-size: 14px;
background-color: #f5f5f5;
margin-bottom: 10px;
display: inline-block;
}
.div2{
user-select: none;
}
</style>
<div class="div1">我是可以被选中的文本!</div>
<!-- 下面元素的CSS属性定义了鼠标不能选中文字 -->
<div class="div2">我是无法用鼠标进行选中的!</div>