如何在 HTML 中双删除线？

Question

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

Answer 1

我能想到的唯一（干净的）方法（不涉及添加其他元素）是使用 :after CSS 伪元素：

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 Fiddle demo.

这可能在 Internet Explorer 任何 IE），但应该可以在最新版本中使用浏览器。签入：Ubuntu 11.04 上的 Firefox 4.x、Chromium 12 和 Opera 11。

更可靠的跨浏览器方法是在del 中使用嵌套元素（在本例中为span）：

<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 Fiddle demo.

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：

.s2 { 
    background: url('dblstrike.gif');
    background-repeat: repeat-x;
    background-position: center left;
    background-attachment: scroll;
    }

其中 dblstrike.gif 是具有两条水平线的可重复图像。

这仅在有限的条件下有效，例如，您需要为不同的字体大小提供不同的背景图像。

Answer 4

与字体大小无关的 CSS 解决方案：

CSS：

del {
    background: url('/images/Strike.gif') repeat-x left 0.72em;
}

见http://jsfiddle.net/NGLN/FtvCv/1/。

Strike.gif 可以是字体颜色的 20x1 像素图像。只需在具有不同文本颜色的容器中将 background-image 重置为 del。

Answer 5

你可以做到...为什么你想要两个删除线而不是一个，这听起来像是一个尖头发老板的要求，他“对字体并不疯狂”。破解解决方案是可能的。

这里是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>

现在是 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%;
}

另外，请确保您在严格模式下运行，否则您将在 IE 中遇到一些问题。

Here's a jsfiddle of the example

Answer 6

css 没那么复杂：

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

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

Answer 7

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

Answer 8

这里有另一个代码，同样具有已知的缺点：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*/
}

Answer 9

尝试以下：它支持双删除线交叉线，可用于有序列表或无序列表。

只需用<del> 引用文本然后<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>

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;
}