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:solidにtext-decoration-style:doubleはここを参照してください、（固体+ダブル）トリプルラインを生成しますネスト：さらに

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

代わりtext-decorationをテキストcolorに一致するようにcurrentcolor経由塗装backgroundlinear-gradientを使用することができます。

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

私のケースではうまくいく別の解決策を見つけました。私はそれが他人のために興味のあるかもしれないのでここにそれを掲示する。背景勾配のソリューションはブラウザで優れて表示されていましたが、文書を印刷するときにうまく機能しませんでした。この解決方法では、第2の取り消し線をテキストから別の<スパン>要素で囲んで区切ります。これはフォントサイズを拡大して少し上に移動します。次に、ネストされた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>