Как удвоить Strikeout текст в HTML?

Ответ 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 < 9 (но у меня нет IE, с которым я мог бы протестировать), но должен функционировать в современных браузерах. Проверено в: Firefox 4.x, Chromium 12 и Opera 11 на Ubuntu 11.04.

Более надежным кросс-браузерным методом является использование вложенного элемента (в данном случае 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 Fiddle demo.

Ответ 2

Раньше я использовал фоновое изображение для этой цели.

Пример CSS:

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

Где dblstrike.gif - повторяемое изображение с двумя горизонтальными линиями.

Это работает только в ограниченных условиях, например, вам понадобятся разные фоновые изображения для разных размеров шрифтов.

Ответ 3

Независимое решение CSS для размера шрифта:

CSS

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

См. http://jsfiddle.net/NGLN/FtvCv/1/.

Strike.gif может быть 20x1 пиксельным изображением в цвет шрифта. Просто reset background-image для del в контейнерах с различным цветом текста.

Ответ 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.

Здесь jsfiddle примера

Ответ 5

У вас не может быть более одного типографского удара по тексту. В лучшем случае у вас может быть зачеркивание и подчеркивание, но я чувствую, что не то, что вы собираетесь делать. Однако двойной зачеркивание невозможно только с помощью свойств шрифта HTML или CSS.

Ответ 6

Здесь еще один код, опять же с известными обратными ссылками: дополнительные требования к коду в HTML (тег span внутри тега del) и зависимость от размера шрифта. Этот код имеет то преимущество, что позволяет нескольким линиям иметь двойную линию:

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*/
}

Ответ 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;
}