如何在去除文本上下空白时避免选中高亮覆盖其他文本？

嘿，这个问题我之前做排版的时候也踩过坑，咱们来捋捋怎么解决~

首先说核心问题：你遇到的选中高亮覆盖，本质是两个文本元素的布局盒实际重叠了——当你用负偏移或者过小的line-height/height让它们挤在一起时，浏览器的文本选中区域是跟着元素的布局盒走的，下层元素的选中高亮会优先覆盖上层的内容，哪怕你给上层加了z-index也不一定管用（因为选中高亮的层级是浏览器内部机制，z-index管不到它）。

能不能只用line-height解决？ #

可以，但前提是通过line-height调整让两个元素的布局盒完全不重叠，同时视觉上达到你要的紧凑效果。举个例子：
假设你的文本字号是16px，给两个元素都设置line-height: 1，这样元素的高度会刚好贴合文本内容（没有多余上下空白）。然后如果要让它们视觉上靠近，别用负margin/top（这会导致布局重叠），而是用正的小间距或者微调line-height的数值，比如：

.upper {
  font-size: 16px;
  line-height: 1.1; /* 稍微放大一点，刚好包裹文本 */
  margin-bottom: -2px; /* 控制在不让布局盒重叠的范围，只让视觉上靠近 */
}
.lower {
  font-size: 16px;
  line-height: 1.1;
}

只要两个元素的布局盒没有重叠，选中的时候就不会互相覆盖了。

其他更靠谱的解决方案 #

如果单纯调line-height达不到你要的视觉效果，还有几个办法：

1. 用transform做视觉偏移，不改变布局盒
   给下层的LOWER元素用transform: translateY(-Xpx)代替负top/margin，这样元素只是视觉上往上移，但它的布局盒还是在原来的位置，选中区域也会留在原位置，不会覆盖UPPER的内容：

   .lower {
     line-height: 1;
     transform: translateY(-4px); /* 根据需求调整偏移量 */
   }
   

2. 把文本放进同一个容器，用span拆分样式
   如果两个文本是一组的，直接把它们放在同一个div里，用span分别控制样式，这样整个容器的选中区域是统一的，不会出现互相覆盖的情况：

   <div class="text-group">
     <span class="upper">UPPER</span>
     <span class="lower">LOWER</span>
   </div>
   

   .text-group {
     line-height: 1;
   }
   .upper, .lower {
     display: block;
     line-height: 1;
   }
   .lower {
     margin-top: -3px; /* 视觉上紧凑，因为在同一个容器里，选中时是整体区域，不会干扰 */
   }
   

3. 控制文本选中的范围（适合不需要同时选中两个文本的场景）
   如果你只需要UPPER能被选中，LOWER可以不允许选中，那可以给LOWER加user-select: none，但你说试过这个不理想，应该是需要两个都能选中，那这个方法可以忽略。

总的来说，最稳妥的思路就是避免元素布局盒的重叠，要么用line-height配合合理的间距，要么用transform做视觉偏移，这样就能解决选中覆盖的问题啦。

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