【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>

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

相关推荐
倾颜2 分钟前
pnpm monorepo 下,如何把 Next.js 应用里的稳定内核拆成内部 workspace 包
前端·react.js·next.js
念格6 分钟前
Flutter 仿微信输入框最佳实践:自适应高度 + 超行数智能切换全屏
前端·flutter
GISer_Jing7 分钟前
前端图片、动图与动画全解析(含PNG/APNG/Lottie/GIF/Canvas/WebGL/WebGPU)
前端·3d·动画·webgl
OpenTiny社区8 分钟前
多端开发头疼?TinyVue 3.30 一招搞定,AI还帮你写代码!
前端·vue.js·github
ZHENGZJM16 分钟前
前端认证状态管理与路由守卫
前端·状态模式
凌览26 分钟前
Claude半个月崩7次!算力不够自己造,强制实名制封
前端·后端
sTone8737540 分钟前
跨端框架通信机制全解析:从 URL Schema 到 JSI 到 Platform Channel
android·前端
蜡台40 分钟前
vue params传参刷新网页数据丢失解决方法
前端·javascript·vue.js
sTone8737541 分钟前
Java 注解完全指南:从 "这是什么" 到 "自己写一个"
android·前端
文心快码BaiduComate1 小时前
里程碑突破 | 文心快码中标国家开发银行代码研发助手项目
前端·后端·架构