如何避免网页文本选中高亮扩展至整个Section宽度（CSS）

这问题我之前踩过坑！咱们先拆解下原因：你给.intro-project设置了width: 100vw，让这个容器占满了整个视口宽度，但里面的<p>只设了width: 55%并居中，浏览器默认的文本选中高亮范围是基于块级父元素的宽度计算的，所以选中段落文本时，高亮就会“撑满”父元素的整个100vw宽度，看起来就很奇怪。

下面给你两种简单的解决方案，按需选择：

方案一：调整父容器宽度，适配内容宽度 #

直接修改.intro-project的宽度属性，让它的宽度自适应内部内容，而不是强制占满视口：

.intro-project { 
  font: 140%/1.5; 
  /* 去掉width:100vw，换成fit-content让容器宽度匹配内容 */
  width: fit-content;
  height: auto; 
  margin: 0 auto; /* 保持容器居中 */
  padding-top: 5%; 
  color: rgba(29, 29, 27, 1);
} 

.intro-project p { 
  width: 55%; 
  margin: 0 auto; 
}
/* 如果想让列表和段落宽度一致，也给ul加同样的样式 */
.intro-project ul {
  width: 55%;
  margin: 0 auto;
  padding-left: 1.5em; /* 保持列表缩进 */
}

这样修改后，.intro-project的宽度只会包裹住内部的段落和列表，文本选中时高亮就只会覆盖实际有内容的区域，不会延伸到整个屏幕了。

方案二：移除父容器的强制宽度，利用默认块级特性 #

如果不需要父容器有特殊的宽度限制，直接删掉width:100vw，因为块级元素默认会占满父元素（也就是<section>）的宽度，同时保持段落的居中设置：

.intro-project { 
  font: 140%/1.5; 
  /* 移除width:100vw */
  height: auto; 
  margin: 0 auto; 
  padding-top: 5%; 
  color: rgba(29, 29, 27, 1);
} 

.intro-project p { 
  width: 55%; 
  margin: 0 auto; 
}
.intro-project ul {
  width: 55%;
  margin: 0 auto;
  padding-left: 1.5em;
}

这个方案更简洁，适合不需要父容器强制占满视口的场景，同样能解决选中高亮过宽的问题。

补充说明 #

浏览器的文本选中行为是基于元素的布局盒模型的，当父元素设置了过宽的宽度，即使子元素只占一部分，选中子元素文本时，高亮也会填充父元素的整个宽度。通过调整父元素的宽度属性，让它和内容匹配，就能从根源上解决这个问题。

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