移动浏览器能否选中网页文本？如何配置user-select实现灵活选中文本？

正常情况下，移动端浏览器默认支持用户长按选中网页文本、拖动选框自由选中特定字词，不需要额外为所有元素配置CSS属性。只有当全局或父级元素设置了user-select: none时，才会阻断默认的文本选中能力。

你当前使用的user-select: all配置逻辑完全符合需求：仅给需要「点击一次全选整段」的元素添加.all类即可，不加该类的普通元素会默认保留自由选中特定字词的能力，无需额外配置。

兼容性说明 #

• 安卓端主流浏览器（Chrome、Edge、国内厂商内置浏览器、微信内置浏览器等）均已完整支持user-select全属性值，无兼容问题。
• 移动端Safari从iOS 15版本开始支持user-select: all，iOS 14及更低版本中该属性不生效，但加了.all类的元素仍可正常长按选中内容，不会影响基础使用。

优化后完整代码示例 #

如果怕全局存在禁用选中的配置冲突，可以先给根元素设置默认选中规则：

/* 全局默认开启自由选中文本，无需为单个元素逐个配置 */
body {
  -webkit-user-select: auto;
  user-select: auto;
}
/* 仅需要点击全选的元素单独添加该类 */
.all {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

HTML结构保持原有逻辑即可：

<p>这段文本支持自由选中任意字词</p>
<p class="all">点击一次就会全选这段全部文本</p>

内容的提问来源于stack exchange，提问作者christianbauer1