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

您可以使用通过background绘制的linear-gradient currentcolor来匹配文字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说：如果背景是纯色，并且你不介意不那么精确的“线条”，那么这是有效的;）

Answer 2

不幸的是，无法阻止在后代内联框中绘制装饰（请参阅CSS2.2和css-text-decor-3）。你唯一的办法是，如果你不想（或者不能）自己画假装饰作弊，那就是将你的外.strike元素拆分为内.strike元素的边界以这种方式产生类似于参考例的结构。

Answer 3

我找到了另一种在我的情况下运作良好的解决方案。我在这里发布，因为它可能对其他人感兴趣。虽然背景渐变解决方案在浏览器中显示出色，但在打印文档时效果不佳。该解决方案通过将另一个＆lt; span＆gt;包围它来将第二个删除线与其文本分开。元素，通过缩放字体大小向上移动一点。然后在嵌套的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中的直通

3 个答案: