【css技巧】css设置文字不能被选中

ChatGPT4.0国内站点:海鲸AI

在CSS中,如果你想让文本内容不能被用户选中,可以使用user-select属性。这个属性可以控制用户是否能够选择文本。以下是如何使用这个属性的例子:

css 复制代码
.unselectable {
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none;    /* Firefox 2+ */
  -ms-user-select: none;     /* IE 10+ */
  user-select: none;         /* 标准语法 */
}

将这个类应用到任何HTML元素上,就会阻止用户选择那个元素的文本:

html 复制代码
<p class="unselectable">这段文本不能被选中。</p>

请注意,这可能会影响用户的体验,因为它限制了用户与页面上内容交互的能力。在某些情况下,例如按钮或交互式控件上,这可能是合适的,但在其他情况下,最好允许用户选择和复制文本。

相关推荐
玄魂5 分钟前
VChart 官网上线 智能助手与分享功能
前端·llm·数据可视化
许___34 分钟前
Vue使用原生方式把视频当作背景
前端·javascript·vue.js
萌萌哒草头将军1 小时前
尤雨溪强烈推荐的这个库你一定要知道 ⚡️⚡️⚡️
前端·vue.js·vite
2401_878454531 小时前
Vue 核心特性详解:计算属性、监听属性与事件交互实战指南
前端·vue.js·交互
1024小神2 小时前
uniapp+vue3+vite+ts+xr-frame实现ar+vr渲染踩坑记
前端
测试界清流2 小时前
基于pytest的接口测试
前端·servlet
知识分享小能手2 小时前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
trsoliu2 小时前
多仓库 Workspace 协作机制完整方案
前端
啦工作呢3 小时前
数据可视化 ECharts
前端·信息可视化·echarts
NoneSL3 小时前
Uniapp UTS插件开发实战:引入第三方SDK
前端·uni-app