跨行有效的CSS自定义文本高亮。

3

我试图找到一种在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>


2
不太确定您的期望是什么,您是否希望得到类似于 https://jsfiddle.net/whep5dmx/ 的内容? - G-Cyrillus
2
或者像这样:https://jsfiddle.net/sbunwa1k/? - Temani Afif
@TemaniAfif,差不多就是这样了!只是在后续行中缺少填充,但我认为我可以将两者结合起来。 - tanGee
好的,如果inline-block不是你想要的,那么在inline元素上使用简单的linear-gradient即可。 - G-Cyrillus
1
请执行以下操作:https://jsfiddle.net/wg7unpko/ - Temani Afif
显示剩余2条评论
2个回答

2

使用渐变和 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>


1

repeating-linear-gradient() CSS属性的帮助下,我找到了一个解决方案。在我的解决方案中,您必须定义font-sizeline-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:2remline-height:2,那么您必须将repeating-linear-gradient()的最后一部分(transparent 2rem)更改为transparent 4rem,然后根据此调整repeating-linear-gradient()中的其他值。例如,1.1可能会更改为2.8。也许现在我的设置不能完全垂直显示highlight,但您可以调整值以达到所需的效果。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接