如何在HTML中双击Strikeout文本？

Question

我知道<s>,<del>和<strike>标签.这些标签会删除一次文本,但是我想要不连续地删除文本2次.谁能告诉我怎么做？提前致谢.

Answer 1

我能想到的唯一(clean-ish)方法(不涉及添加其他元素)是使用:afterCSS伪元素:

del {
    text-decoration: none;
    position: relative;
}
del:after {
    content: ' ';
    font-size: inherit;
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    top: 40%;
    bottom: 40%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

JS小提琴演示.

这可能在Internet Explorer <9中根本不起作用(但我没有任何我可以测试的IE),但应该在最新的浏览器中运行.签入:Ubuntu 11.04上的Firefox 4.x,Chromium 12和Opera 11.

更可靠的跨浏览器方法是在以下内容中使用嵌套元素(在本例中为a span)del:

<del>This text has a (contrived) double strike-through</del>

加上CSS:

del {
    text-decoration: none;
    position: relative;
}
span {
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    bottom: 35%;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
}

JS小提琴演示.

Answer 2

您可以使用del带有text-decoration-style: double双删除线的标签。

<del style="text-decoration-style: double;">Text with double strike through <br/>
Multiline text also works.
</del>

要在span标签或其他标签内的普通文本上应用双删除线，您可以使用text-decoration-line: line-through和text-decoration-style: double。

<span style="text-decoration-line: line-through; text-decoration-style: double;">
Text with double strikethrough
</span>

这两个属性都可以与text-decoration速记结合使用。

<span style="text-decoration: line-through double;">
Text with double strikethrough
</span>

另见：text-decoration-style, text-decoration-line,text-decoration

Answer 3

css 没那么复杂：

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

似乎这会在单个删除线所在的位置产生删除线，然后在其下方添加第二个删除线。

Answer 4

文本中不能有超过一处印刷删除线。你最多可以有一个删除线和一个下划线，但我有一种感觉，这不是你想要的。然而，单独使用 HTML 或 CSS 的字体属性是不可能实现双删除线的。