html - 行尾的 CSS 背景样式

Question

我正在努力在文本(代码片段)中突出显示搜索结果

目前，找到的结果被填充到具有背景样式的 span 标签中，该标签有效...好的。

当你有空行时，它看起来有点奇怪。

span.result {
  background-color: lightsteelblue;
}

<pre>
 This is a <span class='result'>chunk of code;

 that has some</span> funny highlighting many lines;
<pre>

是否可以设置内联 span 的样式，使 EOL 的背景颜色延伸到父 block 的右边缘(pre)？

在上面的例子中

1. 突出显示应从中线开始并一直延伸到右边缘
2. 第二行应完全突出显示
3. 第三行的高亮应该在中线结束。

Answer 1

我不知道这是否适用于你的情况，但你可以做的一件事是给你的整个 pre 元素一个蓝色背景颜色，然后在应该保持白色的部分周围放置一个 span。

pre {
  background-color: lightsteelblue;
  max-width: min-content;
}

.other {
  background-color: white;
}

<pre>
<span class="other">This is a </span><span class='result'>chunk of code;

that has some</span><span class="other"> funny highlighting many lines</span>
</pre>