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

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

相关推荐
鱼毓屿御3 分钟前
Tailwind CSS配置进阶
前端·css
Mr Xu_8 分钟前
Git常用指令
前端·git
michael_ouyang12 分钟前
IM 会话同步企业级方案选型
前端·websocket·electron·node.js
betazhou15 分钟前
借用Deepseek写一个定期清理备份文件的ps脚本
开发语言·前端·javascript·ps·deepseek·清理备份文件
英俊潇洒美少年18 分钟前
vue confirm、messageBox等弹窗关闭后焦点残留问题
前端·javascript·vue.js
东东最爱敲键盘19 分钟前
第7天 进程间通信
java·服务器·前端
harrain24 分钟前
vue3怎么扩展第三方依赖库内部逻辑(拿element plus举例)
前端·javascript·vue.js·elementui
Ulyanov38 分钟前
三维战场可视化核心原理(一):从坐标系到运动控制的全景指南
开发语言·前端·python·pyvista·gui开发
天若有情6731 小时前
从语法拆分到用户感知:我的前端认知重构之路
前端·javascript
_OP_CHEN1 小时前
【前端开发之CSS】(五)CSS 盒模型深度解析:从基础到实战,掌控页面布局核心
前端·css·html·盒模型·页面开发·页面布局·页面美化