如何让flex容器内的两个span元素双击时可整体选中（无需JS）

在block布局中，相邻的<span>因为文本流连续无分隔，双击会被浏览器识别为一个完整的“词”从而整体选中；但flex布局下每个<span>都是独立的flex item，浏览器会将它们的文本视为独立块，双击只能选中单个item内的内容。

以下是两种无需JavaScript的解决方案：

方案1：调整HTML结构（推荐） #

把需要整体选中的多个<span>包裹在同一个父级<span>中，让它们成为单个flex item，文本流会被视为连续整体，双击即可选中全部内容：

<div style="display: flex;">
  <span>
    <span>para</span><span>cetamol</span>
  </span>
</div>

方案2：纯CSS实现（无需修改结构） #

通过pointer-events让<span>不接收点击事件，双击时实际触发flex容器的选中行为，从而选中全部内容：

<div style="display: flex;">
  <span style="pointer-events: none;">para</span>
  <span style="pointer-events: none;">cetamol</span>
</div>

注意：此方法会让单个<span>无法单独响应点击/选中操作，若需要保留单个选中的能力，优先选择方案1。

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