如何使用CSS高亮带换行纯文本的第一段内容？

当然可以实现这个需求，但得先说明：纯CSS本身没办法直接选中文本中第一个换行符之前的内容——毕竟CSS选择器没法针对文本里的特定字符（比如换行符）做精准定位。不过我们有两种靠谱的方案能达成你的目标：

方案一：JavaScript + CSS（精准匹配需求） #

这是最稳妥的方案，能精确选中第一个换行符前的所有内容。思路是用JS把目标文本中第一个换行符之前的部分包裹进<span>标签，再给这个span加高亮样式。

举个实际例子：
假设你的文本容器结构是这样的：

<div class="text-container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Suspendisse porttitor mauris cursus neque vehicula scelerisque. Proin eget euismod purus。
</div>

对应的JS代码（建议放在页面加载完成后执行）：

const container = document.querySelector('.text-container');
const fullText = container.textContent;
const firstLineBreakIndex = fullText.indexOf('\n');

if (firstLineBreakIndex !== -1) {
  const firstSegment = fullText.slice(0, firstLineBreakIndex);
  const restText = fullText.slice(firstLineBreakIndex);
  container.innerHTML = `<span class="highlight">${firstSegment}</span>${restText}`;
}

然后添加CSS样式：

.text-container {
  white-space: pre-line;
}
.highlight {
  background-color: #fff263; /* 自定义高亮底色 */
  font-weight: 600;
}

这个方案能完美匹配你“第一个换行符之前所有文本”的需求，不管这段文本在页面上显示成几行。

方案二：纯CSS近似方案（仅适用于视觉第一行） #

如果你不想用JS，且可以接受“高亮视觉上的第一行文本”（而非严格的第一个换行符前内容），可以用::first-line伪元素：

.text-container {
  white-space: pre-line;
}
.text-container::first-line {
  background-color: #fff263;
  font-weight: 600;
}

但要注意：::first-line选中的是浏览器渲染出来的第一行文本，会随着容器宽度变化而改变范围——比如容器变窄时，第一行的内容会减少，和你要的“第一个换行符前的内容”不是同一个概念，所以这个方案只适合对精度要求不高的场景。

总结一下：如果需要严格匹配第一个换行符前的内容，优先用JS+CSS的方案；如果只是要视觉上第一行高亮，纯CSS的::first-line就能搞定。

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