如何在HTML中双重删除文本？

如何解决如何在HTML中双重删除文本？

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

解决方法

我能想到的唯一（干净的）方式（不涉及添加其他元素）是使用: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 Fiddle演示。这可能在Internet Explorer <9中根本无法使用（但是我没有可以测试的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演示。 , 我以前为此目的使用过背景图片。样本CSS：

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

其中dblstrike.gif是带有两条水平线的可重复图像。这仅在有限的条件下有效，例如，对于不同的字体大小，您将需要不同的背景图像。 , 您可以将del标记与text-decoration-style: double一起使用以实现双重删除线。 <del style=\"text-decoration-style: double;\">Text with double strike through</del>, 独立于字体大小的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。 , 您可以做到...为什么想要两个删除线而不是一个删除线，听起来像是一个尖头的上司的要求，他“对字体不发疯”。可以破解解决方案。这是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中将出现一些问题。这是示例的jsfiddle , 您的文字不能超过一个印刷警示。最多您可以有一个删除线和一个下划线，但是我感觉这不是您想要的。但是，单独使用HTML或CSS \的字体属性不可能实现双重删除线。 , 这是另一个具有已知缺点的代码：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*/
}

, 没那么复杂的CSS：

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

似乎这样会在单个删除线所在的位置生成删除线，然后在其下方添加第二个删除线。 , 请尝试以下操作：它支持双删除线交叉线，可以在有序列表或无序列表中使用。只需用<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;
}

如何在HTML中双重删除文本？

如何解决如何在HTML中双重删除文本？

解决方法

相关推荐