如何在 HTML 中对文本进行双重删除？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6395890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Double Strikeout a Text in HTML?
提问by John Doe
I know about <s>, <del>and <strike>tags. These tags strike out a text once, however I want to strike out a text 2 times discontinuously. Can anyone please tell me how to do it? Thanks in advance.
我知道<s>,<del>和<strike>标签。这些标签删除一个文本一次，但是我想不连续地删除一个文本 2 次。谁能告诉我怎么做？提前致谢。
回答by David says reinstate Monica
The only (clean-ish) way I could think of (that doesn't involve additional elements being added) is to use the :afterCSS pseudo-element:
我能想到的唯一（干净的）方法（不涉及添加额外元素）是使用: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;
}
This is likely to to not work at all in Internet Explorer < 9 (but I don't have anyIE with which I could test), but should be functional in up-to-date browsers. Checked in: Firefox 4.x, Chromium 12 and Opera 11 on Ubuntu 11.04.
这在 Internet Explorer < 9 中可能根本不起作用（但我没有任何可以测试的 IE），但在最新的浏览器中应该可以正常工作。已签入：Ubuntu 11.04 上的 Firefox 4.x、Chromium 12 和 Opera 11。
A more reliable cross-browser method is to use a nested element (in this instance a span) within the del:
更可靠的跨浏览器方法是在 中使用嵌套元素（在本例中为 a span）del：
<del>This text has a (contrived) double strike-through</del>
Coupled with the CSS:
结合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;
}
回答by hev1
You can use the deltag with text-decoration-style: doublefor a double strikethrough.
您可以使用del带有text-decoration-style: double双删除线的标签。
<del style="text-decoration-style: double;">Text with double strike through</del>To apply a double strikethrough on normal text inside a spanor other tag, you can use text-decoration: line-throughand text-decoration-style: double.
要在span标签或其他标签内的普通文本上应用双删除线，您可以使用text-decoration: line-through和text-decoration-style: double。
<span style="text-decoration: line-through; text-decoration-style: double;">Text with double strikethrough</span>回答by Alo
I've used a background image for this purpose before.
我以前为此目的使用过背景图像。
Sample CSS:
示例 CSS：
.s2 {
background: url('dblstrike.gif');
background-repeat: repeat-x;
background-position: center left;
background-attachment: scroll;
}
Where dblstrike.gif is a repeatable image with two horizontal lines.
其中 dblstrike.gif 是带有两条水平线的可重复图像。
This only works under limited conditions, you would for example need different background images for different font-sizes.
这仅适用于有限的条件，例如，您需要为不同的字体大小使用不同的背景图像。
回答by Zoidberg
You can do it... why you want two strike-throughs instead of one sounds like the demands of a pointy haired boss who "isn't crazy about the font". It is possible to hack in a solution.
你可以做到......为什么你想要两个删除线而不是一个听起来像一个尖头发老板的要求，他“对字体并不疯狂”。可以破解解决方案。
Here is the html
这是html
This is my text with <span class="double-strike"><div class="the-lines"></div>
two lines through it</span> in a paragraph because of crazy weird
<span class="double-strike"><div class="the-lines"></div>requirements</span>
Now the CSS
现在的 CSS
span.double-strike {
position: relative;
}
span.double-strike div.the-lines {
position: absolute;
top: 10px; /* Depends on the font size */
left: 0;
border-top: 3px double black;
width: 100%;
height: 100%;
}
ALSO, make sure you are running in strict mode, or else you will have a few issues in IE.
另外，请确保您在严格模式下运行，否则您将在 IE 中遇到一些问题。
回答by NGLN
A font-size independent CSS solution:
独立于字体大小的 CSS 解决方案：
CSS:
CSS：
del {
background: url('/images/Strike.gif') repeat-x left 0.72em;
}
See http://jsfiddle.net/NGLN/FtvCv/1/.
见http://jsfiddle.net/NGLN/FtvCv/1/。
Strike.gifcould be a 20x1 pixel image in the font color. Just reset background-imagefor delin containers with different text color.
Strike.gif可以是字体颜色的 20x1 像素图像。只是重置background-image为del在不同的文字颜色的容器。
回答by Harry
Not that complicated with css:
用 css 没那么复杂：
.textDoubleStrikeThru {
text-decoration: line-through;
text-decoration-style: double;
}
Seems like this produces the strike-through positioned where the single strike-through is positioned and then adds a second strike-through beneath that.
似乎这会在单个删除线所在的位置产生删除线，然后在其下方添加第二个删除线。
回答by mach
Here another code, again with the known draw-backs: Additional code-requirements in the HTML (a span tag inside the del tag) and dependence on font size. This code has the advantages that it allows for multiple lines to have double line-through:
这是另一个代码，同样具有已知的缺点：HTML 中的附加代码要求（del 标签内的 span 标签）和对字体大小的依赖。此代码的优点是它允许多行具有双行通过：
del.double-strike {
position: relative;
top: 20px; /*this depends on font size!*/
border-top: 3px double black; /*this is the actual "double line-through"*/
text-decoration:none; /*suppress normal line-through of del tag*/
}
del.double-strike span {
position: relative;
top: -20px; /*this must mach the above offset*/
}
回答by BoltClock
You can't have more than one typographic strike through your text. At most you can have a strikethrough and an underline, but I have a feeling that's not what you're going for. A double strikethrough, though, is not possible with HTML or CSS's font properties alone.
您的文本中不能有多个印刷删除线。最多你可以有一个删除线和一个下划线，但我有一种感觉，这不是你想要的。但是，单独使用 HTML 或 CSS 的字体属性是不可能实现双删除线的。
回答by Hyman Ting
try the following: it supports double strikeout cross lines and can be used in ordered list or unordered list.
尝试以下操作：它支持双三振交叉线，可用于有序列表或无序列表。
Just quote the text with <del>then <span class='del'>. See below (I borrow the sample from previous post of Mach).
只需用<del>then引用文本<span class='del'>。见下文（我从 Mach 上一篇文章中借用了样本）。
<p>This is my text with <del><span class='del'>two lines through it</span></del>
in a paragraph because of crazy weird requirements</p>
<div>This is my text with <del><span class='del'>two lines through it</span></del>
in a paragraph because of crazy weird requirements</div>
The CSS is as below:
CSS如下：
del {
padding:0; margin:0;
position: relative;
text-decoration:none;
display: inline;
left: 0;
top: 0.8em;
border-top: 5px double red;
}
del > span.del {
padding:0; margin:0;
position: relative;
top: -0.8em;
left: 0;
width:100%;
color: black;
}
