Question

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

Answer 1

我能想到的唯一（clean-ish）方式（不涉及添加其他元素）是使用: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中，这可能根本不起作用。 9（但我没有我可以测试的任何 IE），但应该在最新的浏览器中运行。签入：Ubuntu 11.04上的Firefox 4.x，Chromium 12和Opera 11。

更可靠的跨浏览器方法是在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 Fiddle demo

Answer 2

之前我曾为此目的使用过背景图片。

示例CSS：

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

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

这仅适用于有限的条件，例如，您需要针对不同的字体大小使用不同的背景图像。

Answer 3

独立于字体大小的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 4

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

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

您的文字不能超过一次印刷。最多你可以有一个删除线和一个下划线，但我有一种感觉，这不是你想要的。但是，单独的HTML或CSS字体属性无法实现双重删除。

Answer 6

这里是另一个代码，再次使用已知的缺点：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 7

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

只需使用<del>然后<span class='del'>引用该文字。见下文（我从前一篇马赫文章中借用样本）。

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

Answer 8

您可以将del标记与text-decoration-style: double一起使用以实现双重删除线。

<del style="text-decoration-style: double;">Text with double strike through</del>

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

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

Answer 9

使用CSS并不那么复杂：

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

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

如何在HTML中双击Strikeout文本？

9 个答案: