CSS如何仅为文本添加背景色而非作用于整个区块？

因为块级元素（如<div>、<pre>）的背景默认会铺满整个容器宽度，所以要实现背景仅跟随文字范围，核心思路是让承载背景的元素宽度由文本内容撑开，以下是几种常用实现方式：

方案1：行内元素包裹文本（兼容性最好，适配所有场景） #

给每行文字套行内标签（比如<span>），直接给行内标签加背景样式即可，行内元素的宽度默认由内容长度决定，背景自然只会覆盖文字区域。
示例代码：

<pre>
  <span class="text-bg">This is a line</span>
  <br>
  <span class="text-bg">This is another line</span>
</pre>

.text-bg {
  background-color: #ffeb3b; /* 替换为你需要的背景色 */
  /* 可选：添加少量内边距让背景更美观 */
  padding: 2px 4px;
  border-radius: 2px;
}

方案2：自动换行长文本无需手动拆分行 #

如果是无需手动换行的长文本，不需要给每行单独套标签，配合box-decoration-break属性即可实现每行背景都仅覆盖文字：

<p class="auto-line-bg">
  这是一段会自动换行的长文本，不需要手动拆分每一行，换行后每行的背景都会自动适配文字长度，不会铺满整个容器宽度。
</p>

.auto-line-bg {
  display: inline;
  background-color: #ffeb3b;
  padding: 2px 4px;
  /* 核心属性：让换行后每行的样式独立渲染 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

方案3：仅选中文本时显示对应背景 #

如果需求是用户选中文字时才显示仅覆盖文字的背景，可以直接用::selection伪类实现，不需要修改HTML结构：

/* 选中态背景样式 */
::selection {
  background-color: #ffeb3b;
  color: #000;
}
/* 兼容火狐浏览器 */
::-moz-selection {
  background-color: #ffeb3b;
  color: #000;
}

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