【CSS】user-select 属性（控制用户是否可以选择文本）

时间：2024-10-25 12:10:27

文章目录

    • 基本使用

背景：

  • 遇到一个这样的问题，在 antd 中的 tree 树形空间组件中，无法选择文字
  • 比如我想选择 leaf 文字进行复制，结果发现无法选中，这时候就要用了 user-select 属性了

在这里插入图片描述

基本使用

  • user-select 属性：用于控制用户是否可以选择文本。
  • 属性值：
属性值 描述
none 元素及其子元素的文本不可选中
text 用户可以选择文本
all 在一个 HTML 编辑器中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选中
contain 允许在元素内选择；但是，选区将被限制在该元素的边界之内
  • 属性值 - auto 
auto 的具体取值取决于一系列条件，具体如下：

1. 在 ::before 和 ::after 伪元素上，采用的属性值是 none
2. 如果元素是可编辑元素，则采用的属性值是 contain
-. 否则，如果此元素的父元素的 user-select 采用的属性值为 all，则该元素采用的属性值也为 all
-. 否则，如果此元素的父元素的 user-select 采用的属性值为 none，则该元素采用的属性值也为 none
-. 否则，采用的属性值为 text

相关文章