【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 小时前
使用 Vant CLI 搭建 UI 组件库:从 H5 到小程序跨平台
前端·javascript
默_笙4 小时前
😭 我花了两小时找了一个数据结构 bug,才把"迷你 Cursor"跑起来,绝望(bushi)
前端·javascript
竹林8184 小时前
wagmi v2 监听合约事件踩坑记:从 `useContractEvent` 到 `watchContractEvent`,我重构了三版才搞定实时数据流
前端·javascript
天若有情6734 小时前
纯HTML+Tailwind单页作品集网站——零框架静态前端完整源码
前端·html
WebGirl4 小时前
H5唤起app前端实现方案
前端
heimeiyingwang5 小时前
【架构实战】SQL注入与XSS防御:常见Web漏洞的系统性修复
前端·sql·架构
甜味弥漫5 小时前
一文搞懂 Flex 弹性布局:为什么它成为现代 CSS 布局的首选?
css
Larcher5 小时前
从零实现一个可运行的 RAG - LangChain、内存向量库与检索增强生成
前端·javascript
饼饼饼5 小时前
React 组件间传参好痛苦?试试这一套"优雅组合拳":Context 与 Refs 实战
前端