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

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

相关推荐
晴殇i10 分钟前
CSS Grid 与 Flexbox:现代前端布局的双子星
前端·css
曹卫平dudu13 分钟前
一起学习TailWind Css
前端·css
sosojie20 分钟前
and+design的table前端本地分页处理
前端·vue.js
炫饭第一名22 分钟前
前端玩转 AI 应用开发|SSE 协议与JS中的流式处理🌊
前端·人工智能·程序员
前端老宋Running25 分钟前
一种名为“Webpack 配置工程师”的已故职业—— Vite 与“零配置”的快乐
前端·vite·前端工程化
用户66006766853925 分钟前
从“养猫”看懂JS面向对象:原型链与Class本质拆解
前端·javascript·面试
parade岁月26 分钟前
我的第一个 TDesign PR:修复 Empty 组件的 v-if 警告
前端
云鹤_26 分钟前
【Amis源码阅读】低代码如何实现交互(下)
前端·低代码·架构
StarkCoder26 分钟前
一次搞懂 iOS 组合布局:用 CompositionalLayout 打造马赛克 + 网格瀑布流
前端
之恒君27 分钟前
JavaScript 对象相等性判断详解
前端·javascript