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

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

相关推荐
xcLeigh1 分钟前
AI 绘制图表专栏:用豆包轻松实现 HTML 柱状图、折线图与饼图
前端·人工智能·html·折线图·柱状图·图表·豆包
码代码的霖2 分钟前
HTML———标签元素
前端·html
无·糖3 分钟前
大学生HTML期末大作业——HTML+CSS+JavaScript人物明星(周杰伦)
javascript·css·html·课程设计·大学生·大作业·web网页设计作业
鲸落✗5 分钟前
深入解析单HTML实现的网页版《我的世界》(附代码下载链接)
前端·python·html
Aerelin8 分钟前
豆瓣数据采集案例
前端·爬虫·python·js·playwright
扑棱蛾子9 分钟前
unipush推送入门:10分钟搞定UniPush在线消息集成
前端
b***653218 分钟前
Go-Gin Web 框架完整教程
前端·golang·gin
济南壹软网络科技有限公司20 分钟前
沉浸式体验革命:壹软科技2025新版盲盒源码前端3D渲染与个性化运营技术解析
前端·科技·uni-app·开源·php·盲盒源码
陈随易22 分钟前
MoonBit语法基础概述
前端·后端·程序员
v***431723 分钟前
springboot3整合knife4j详细版,包会!(不带swagger2玩)
android·前端·后端