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

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

相关推荐
_Eleven1 小时前
Tailwind CSS vs UnoCSS 深度对比
前端
NEXT062 小时前
TCP 与 UDP 核心差异及面试高分指南
前端·网络协议·面试
qq_24218863322 小时前
HTML 全屏烟花网页
前端·html
码云数智-大飞2 小时前
前端性能优化全链路实战:从加载速度到渲染效率的极致提速方案
前端·性能优化
锅包一切2 小时前
【蓝桥杯JavaScript基础入门】一、JavaScript基础
开发语言·前端·javascript·蓝桥杯
NEXT062 小时前
HTTP 协议演进史:从 1.0 到 2.0
前端·网络协议·面试
好学且牛逼的马3 小时前
从“混沌初开”到“有序统一”:Java集合框架发展历程与核心知识点详解
前端·数据库·python
嵌入式×边缘AI:打怪升级日志3 小时前
编写Bootloader实现下载功能
java·前端·网络
恋猫de小郭4 小时前
Flutter 设计包解耦新进展,material_ui 和 cupertino_ui 发布预告
android·前端·flutter
linux_cfan4 小时前
[2026深度评测] 打造“抖音级”丝滑体验:Web直播播放器选型与低延迟实践
前端·javascript·html5