如何解决Chrome、火狐浏览器中HTML选中文本右侧出现缩进的问题

该差异来自不同浏览器内核的默认文本选中范围渲染规则：

• Chromium（Chrome、Edge等）、Gecko（火狐）内核默认会将块级元素内整行的剩余宽度计入选中范围，所以会出现右侧缩进效果
• Webkit（Safari）内核默认仅将实际文本区域计入选中范围，无额外缩进

解决方案 #

方案1：嵌套内联元素控制选中范围（对原有布局影响最小） #

给原块级元素禁用选中，再嵌套<span>承载文本并单独开启选中，即可让选中范围仅匹配实际文本宽度，适配所有浏览器。

代码示例

<div class="content">
  <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa architecto natus modi saepe dolore nihil earum nostrum vero molestias nesciunt minima quis culpa, dolores excepturi error nemo! Impedit, beatae enim!</span>
</div>

.content {
  width: 200px;
  border: 1px solid green;
  user-select: none;
}
.content span {
  user-select: text;
}

方案2：修改块级元素的display属性（实现最简单） #

将块级元素的默认display: block改为display: inline-block，即可让选中范围仅覆盖内容区域，需要固定宽度可以保留原有width属性即可。

代码示例

div {
  width: 200px;
  border: 1px solid green;
  display: inline-block;
  /* 如需保持块级元素独占一行的特性，可额外添加 width: 100% 或 clear: both 规则 */
}

内容的提问来源于stack exchange，提问作者Дмитрий Лэнь