一、CSS禁止选中代码
body {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
用户通常可以通过鼠标或键盘选中文本,但在一些情况下,我们需要禁止用户选中页面上的文本,这时就需要使用CSS禁止选中代码。通过将CSS属性User-select设置为none,可以实现禁用选中操作。
这种方法也可以防止在页面上拖动和选择文字,从而保护网站的版权和隐私。
二、CSS禁止复制文字
body {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
除了禁止选中文字,我们还可以禁止用户复制页面上的文字。在一些保密性要求较高的网站中,禁止复制文字可以有效避免用户将内容复制到其他地方进行传播。
与禁止选中代码类似,我们只需要在CSS中设置User-select为none即可禁用复制文字。
三、CSS禁止选中文本
div {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
在某些情况下,我们可能只想禁止选中部分文本而不是整个页面。这时可以将上述CSS代码应用到需要禁止选中文本的元素上,如div,span等。
这种方式可以实现选择性禁用文本,同时保留其他文本的选中和复制功能。
四、CSS禁止选中图片
img {
-webkit-user-drag:none;
-moz-user-drag:none;
-ms-user-drag:none;
user-drag:none;
}
除了禁止选中文字和文本外,我们同样可以禁止用户在网页上拖动和保存图片,保护图片的版权和隐私。
通过将CSS属性User-drag设置为none,可以阻止用户拖动和保存图片,从而实现禁止选中图片的效果。
五、CSS禁止换行
p {
white-space:nowrap;
}
在一些特殊的排版需求中,我们可能需要禁止文本自动换行。这时可以使用CSS属性White-space将换行模式设置为nowrap,从而实现禁止换行的效果。
注意,将所有文本设置为nowarp会使得文本溢出父容器而无法正确显示,因此我们只需将需要禁止换行的元素设置为nowrap即可。
六、CSS禁止点击
button {
pointer-events:none;
}
在某些情况下,我们需要禁止用户点击某个元素,如禁止操作一个按钮等。这时可以使用CSS属性Pointer-events将点击事件禁用,从而实现禁止点击的效果。
需要注意的是,该属性的禁用效果是会冒泡的,即如果一个元素被禁止点击,它的子元素也会被自动禁用点击。
七、CSS禁止滚动
body {
overflow:hidden;
}
在一些情况下,我们需要禁止用户滚动页面,如在模态框或其他需要锁定页面的场景中。这时可以使用CSS属性Overflow将页面滚动条设置为隐藏,从而实现禁止滚动的效果。
需要注意的是,隐藏滚动条并不代表禁用页面滚动,用户仍然可以通过其他手段来滚动页面,因此在某些情况下,我们需要结合JavaScript一起使用来完全禁止页面滚动。
八、CSS禁止复制
::selection {
background-color:transparent;
}
在一些情况下,我们需要禁止用户使用鼠标右键复制页面内容。这时可以使用CSS伪元素Selection将选中文本的背景色设置为透明,使得选择文字时无法看到高亮选中的效果,从而达到禁用复制的效果。
九、CSS禁止点击事件
a {
pointer-events:none;
}
在某些特殊场景中,我们需要禁止链接的点击事件,如在面包屑导航中禁用当前页的链接等。这时可以使用CSS属性Pointer-events将链接的点击事件禁用,从而实现禁用点击的效果。
需要注意的是,该属性的禁用效果是会冒泡的,即如果一个链接被禁止点击,它的父元素也会被自动禁用点击。
十、CSS禁止页面滚动选取
body::-moz-selection {
background-color:transparent;
}
body::selection {
background-color:transparent;
}
在某些情况下,我们需要禁止用户在页面上滚动选取文本,如在拖拽元素时,避免滚动条因为文本选中而滑动等。这时可以使用CSS伪元素Selection将选中文本的背景色设置为透明,使得选择文字时无法看到高亮选中的效果,从而达到禁用滚动选取的效果。
需要注意的是,对于IE浏览器,使用::selection可能会出现兼容性问题,需要使用::-ms-selection来代替。