macOS Safari空白区域选中蓝色及选中范围超出问题解决咨询

请查看下方两张截图，第一张为Chrome浏览器效果，第二张为Safari浏览器效果，两者均为2023年1月时的最新版本。

页面背景为Chrome中显示的深灰色。按下CMD+A（全选）时，选中颜色（黄色）应与Chrome中的效果一致，但在Safari中可观察到两个问题：

• Safari会对文本容器宽度外的空白区域应用选中样式；
• Safari会对<br />元素使用原生蓝色选中色。

请问如何移除该蓝色选中效果，并将选中范围限制在文本宽度内？

解决方案 #

1. 限制选中范围在文本宽度内 #

给文本容器设置贴合文本内容的宽度属性，避免空白区域被选中：

.text-container {
  /* 让容器宽度自适应文本，适合行内或需要换行的块级元素 */
  width: fit-content;
  /* 或者用inline-block，让容器仅包裹文本区域 */
  /* display: inline-block; */
}

如果是需要保持块级布局的元素，优先使用width: fit-content，它会让容器宽度匹配文本长度，同时保留块级元素的换行特性。

2. 移除<br />元素的原生蓝色选中色 #

通过全局选中样式统一覆盖，并禁止<br />元素被选中：

/* 统一设置选中的背景色和文本色，匹配Chrome的黄色效果 */
::selection {
  background-color: #ffff00;
  color: #000;
}
/* 兼容旧版Safari的前缀写法 */
::-webkit-selection {
  background-color: #ffff00;
  color: #000;
}

/* 禁止br元素被选中，消除Safari的原生蓝色选中样式 */
br {
  user-select: none;
}

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