1

在我的场景中，我有一些带有已删除部分的文本部分，由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。我也尝试过使用borderand的解决方法:after，但这不适用于多行。我很感激任何帮助。

4

3 回答 3

3

您可以使用background linear-gradient绘制的通孔来currentcolor匹配文本：colortext-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 说：如果背景是纯色并且您不介意不太精确的“线条”，则此方法有效；）

于 2017-03-15T14:03:27.777 回答
1

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

于 2017-03-15T13:59:11.563 回答
0

我找到了另一种在我的情况下效果很好的解决方案。我把它贴在这里，因为它可能会引起其他人的兴趣。虽然背景渐变解决方案在浏览器中显示出色，但在打印文档时效果不佳。此解决方案通过将第二个删除线与其文本隔开，方法是用另一个 <span> 元素将其包围，该元素通过缩放字体大小向上移动一点。然后在嵌套的 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>

于 2017-06-28T10:09:57.703 回答