sub - tag html del

¿Cómo doble Strikeout un texto en HTML?

Question

Sé sobre las etiquetas <s> , <del> y <strike> . Estas etiquetas tachan un texto una vez, sin embargo, quiero tachar un texto 2 veces de forma discontinua. ¿Alguien por favor me puede decir cómo hacerlo? Gracias por adelantado.

Answer 1

Aquí otro código, de nuevo con los inconvenientes conocidos: requisitos de código adicionales en el HTML (una etiqueta de intervalo dentro de la etiqueta del) y dependencia del tamaño de fuente. Este código tiene las ventajas de permitir que múltiples líneas tengan doble línea de paso:

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 2

He utilizado una imagen de fondo para este propósito antes.

CSS de muestra:

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

Donde dblstrike.gif es una imagen repetible con dos líneas horizontales.

Esto solo funciona bajo condiciones limitadas, por ejemplo, necesitaría diferentes imágenes de fondo para diferentes tamaños de fuente.

Answer 3

La única manera (limpia-ish) en la que podría pensar (que no implica la adición de elementos adicionales) es usar el :after pseudo-elemento 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;
}

Demostración de JS Fiddle .

Es probable que esto no funcione en absoluto en Internet Explorer <9 (pero no tengo ningún IE con el que pueda probar), pero debería funcionar en los navegadores actualizados. Registrado: Firefox 4.x, Chromium 12 y Opera 11 en Ubuntu 11.04.

Un método de navegador cruzado más confiable es usar un elemento anidado (en este caso, un span ) dentro del del :

<del>This text has a (contrived) double strike-through</del>

Junto con el 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;
}

Demostración de JS Fiddle .

Answer 4

No puedes tener más de una huelga tipográfica a través de tu texto. A lo sumo, puede tener un tachado y un subrayado, pero tengo la sensación de que no es lo que está buscando. Sin embargo, un doble tachado no es posible solo con las propiedades de fuente HTML o CSS.

Answer 5

Puede utilizar la etiqueta del con text-decoration-style: double para un tachado doble.

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

Para aplicar un tachado doble en el texto normal dentro de un span u otra etiqueta, puede utilizar text-decoration: line-through y text-decoration-style: double .

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

Answer 6

Puedes hacerlo ... por qué quieres dos tachados en lugar de uno, como las demandas de un jefe de pelo puntiagudo que "no está loco por la fuente". Es posible hackear una solución.

Aquí está el 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>

Ahora el 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%;
}

TAMBIÉN, asegúrese de que está ejecutando en modo estricto, o de lo contrario tendrá algunos problemas en IE.

Aquí hay un jsfiddle del ejemplo.

Answer 7

Una solución CSS independiente del tamaño de fuente:

CSS:

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

Consulte http://jsfiddle.net/NGLN/FtvCv/1/ .

Strike.gif podría ser una imagen de 20x1 píxeles en el color de la fuente. Solo restablezca background-image de background-image para del en contenedores con diferentes colores de texto.

Answer 8

intente lo siguiente: soporta líneas cruzadas de doble tachado y se puede usar en lista ordenada o lista desordenada.

Solo cite el texto con <del> luego <span class=''del''> . Ver más abajo (tomo prestada la muestra del post anterior de 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>

El CSS es el siguiente:

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