CSS禁止选中

一、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来代替。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/293914.html