跨多行工作的CSS自定义文本高亮显示

Question

我正试图找到一种方法，在CSS中创建一个自定义高亮显示，它占据大约50%的文本高度，垂直居中，也适用于多行。我可以在单行上使用几种方法，但当应用于多行文本时，所有方法都会失败，或者无法垂直居中。

hr {
margin: 15px 0;
}
.title-psuedo .background {
position: relative;
padding-left: 40px;
padding-right: 40px;  
}
.title-psuedo .background:after {
content: "";
position: absolute;
width: 100%;
background: yellow;
left: 0;
bottom: 0.3em;
height: 0.4em;
z-index: -1;
}
.title-mark mark {
display: inline-block;
line-height: 0em;
padding-bottom: 0.5em;
padding-left: 40px;
padding-right: 40px;  
}
.title-shadow .background {
box-shadow: inset 0 -0.5em 0 yellow;
padding-left: 40px;
padding-right: 40px;  
}
.title-background .background {
padding: 0 40px;
line-height: 0.5em;
margin: 0.25em 0;
background-color: yellow;
display: inline-block;
}

<div class="title title-psuedo">
<span class="background">This is the desired effect.</span>
</div>
<hr>
<div class="title title-psuedo">
<span class="background">This works on one line, but not when the text spans onto 2 separate lines, as the background messes up and only appears on the last line of the content.</span>
</div>
<hr>
<div class="title title-mark">
<mark>This works on one line, but not when the text spans onto 2 separate lines, as the lines merge into one single line which isn't legible. Also, I'm not sure the highlight can be centered vertically.</mark>
</div>
<hr>
<div class="title title-shadow">
<span class="background">This works on multiple lines, but I'm not sure the highlight can be centered vertically. Additionally, the second line does not have the same padding as the first.</span>
</div>
<hr>
<div class="title title-background">
<span class="background">This works on one line, but not when the text spans onto 2 separate lines as the line height collapses the text together and the highlight covers both lines without a gap. The second line does have the initial padding however.</span>
</div>

Answer 1

使用梯度和box-decoration-break

.title {
--lineHeight: 1.4em;
}
.title span {
line-height: var(--lineHeight);
padding: 0 40px;
background: linear-gradient(yellow 0 0) 0/100% calc(var(--lineHeight)/4) no-repeat;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.title {
margin: 0 20px;
}

<div class="title title-psuedo">
<span class="background">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget mi vitae felis molestie volutpat. Integer viverra arcu id turpis molestie, id mollis enim molestie. Proin luctus auctor dictum. Maecenas nec libero bibendum, semper erat a, tristique nunc. Fusce accumsan feugiat ante,</span>
</div>

Answer 2

我在repeating-linear-gradient()CSS属性的帮助下找到了一个解决方案。在我的解决方案中，您必须定义font-size和line-height。然后根据它们定义repeating-linear-gradient()中的最后一个数字。这是我的代码：

.text-deco .background2 {
line-height: 2;
font-size: 1rem;
display: block;
background-image: repeating-linear-gradient(transparent,transparent 0.9rem,yellow 0.9rem, yellow 1.1rem,transparent 1.1rem, transparent 2rem);
}

<div class="title text-deco">
<span class="background2">This works on one line, but not when the text spans onto 2 separate lines as the line height collapses the text together and the highlight covers both lines without a gap. The second nd the highlight covers both lines without a gap. The second</span>
</div>

我的意思是，例如，如果你想要font-size:2rem和line-height:2，那么你必须将repeating-linear-gradient()的最后一部分(transparent 2rem(更改为transparent 4rem，然后根据它调整repeating-linear-gradient()中的其他值。例如，CCD_ 12可以改变为CCD_。也许现在我的设置没有在确切的垂直位置显示突出显示，但您可以调整值以达到您想要的值。