css 中的嵌套直通

Question

在我的场景中，我有一些带有删除部分的文本，由 line-through 可视化。有时，这些部分是嵌套的。我想产生这样的输出（请运行片段）：

span.strike1 {
  text-decoration:line-through;
  text-decoration-style:solid;
}

span.strike2 {
  text-decoration:line-through;
  text-decoration-style:double;
}

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. <span class="strike1">Aenean commodo ligula
eget dolor. </span><span class="strike2">Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis,
sem.</span><span class="strike1"> Nulla consequat
massa quis enim.</span> Donec pede justo, fringilla
vel, aliquet nec, vulputate eget, arcu.</p>

但是，我想用嵌套元素重现相同的结果。如果不应用 javascript，这真的可以实现吗？将 text-decoration-style:double 嵌套到 text-decoration-style:solid 将产生三重线（双线 + 实线），请参见此处：

span.strike {
  text-decoration:line-through;
  text-decoration-style:solid;
}

span.strike span.strike {
  text-decoration:line-through;
  text-decoration-style:double;
}

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. <span class="strike">Aenean commodo ligula eget
dolor. <span class="strike">Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies
nec, pellentesque eu, pretium quis, sem.</span> Nulla
consequat massa quis enim.</span> Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu.</p>

此外，似乎不可能影响text-decoration的位置。我还尝试了 border 和 :after 的解决方法，但这不适用于多行。感谢您的帮助。

Answer 1

不幸的是，无法阻止在后代内联框上绘制装饰（参见 CSS2.2 and css-text-decor-3）。如果您不想（或不能）通过自己绘制假装饰作弊，您唯一的办法是以这种方式在内部 .strike 元素的边界处拆分外部 .strike 元素以产生类似于您的参考示例的结构。

Answer 2

您可以使用通过 currentcolor 绘制的 background linear-gradient 来匹配文本 color 而不是 text-decoration:

p {
line-height:1.6em;
font-size:16px;
}
span.strike {background:linear-gradient(
to top, 
transparent 35%, 
currentcolor 35%, 
currentcolor calc(35% + 1px ) , 
transparent calc(35% + 1px ) 
);
}

span.strike span.strike {
background:linear-gradient(
to top, 
transparent 5px, 
currentcolor 5px, 
currentcolor 6px , 
white 6px, /* hide other bg */
white 9px,  /* hide other bg */
currentcolor 9px, 
currentcolor  10px, 
transparent 10px
);
}
/* why currentcolor ? , hover tripleed striked span */
span span:hover {
color:purple;
}

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. <span class="strike">Aenean commodo ligula eget
dolor. <span class="strike">Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies
nec, pellentesque eu, pretium quis, sem.</span> Nulla
consequat massa quis enim.</span> Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu.</p>

@BoltClock says : This works provided the background is a solid color and you don't mind the less-than-precise "lines" ;)

Answer 3

我找到了另一种适用于我的情况的解决方案。我将其 post 放在这里是因为其他人可能会对它感兴趣。虽然背景渐变解决方案在浏览器中显示出色，但在打印文档时效果不佳。此解决方案通过用另一个元素围绕它来将第二个删除线与其文本分开，该元素通过缩放字体大小向上移动一点。然后在嵌套的 span 元素中重置字体大小以正确显示文本。

p {
  line-height:1.5em;
}

span.strike {
  text-decoration:line-through;
  text-decoration-style:solid;
}

span.strikeLine {
  text-decoration:line-through;
  text-decoration-style:solid;
  font-size:1.43em;
  line-height:0;
}

span.strikeText {
  font-size:0.7em;
  line-height:1.5em;
}

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. <span class="strike">Aenean commodo ligula eget
dolor. <span class="strikeLine"><span class="strikeText">Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec quam felis, ultricies
nec, pellentesque eu, pretium quis, sem.</span></span> Nulla
consequat massa quis enim.</span> Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu.</p>

css 中的嵌套直通

Nested line-through in css

html

css

text-decorations

strikethrough

line-through