Comment doubler un texte en HTML?

Je sais à propos de <s><del> et <strike> balises. Ces balises grève un texte à la fois, mais je veux frapper un texte 2 fois de façon discontinue. Quelqu'un peut-il me dire comment faire? Merci à l'avance.

source d'informationauteur John Doe

  1. 14

    Le seul (clean-ish) de manière à ce que je pouvais penser (qui n'implique pas des éléments supplémentaires ajoutés) est d'utiliser la :after CSS pseudo-élément:

    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 démo.

    Il est probable que cela ne fonctionne pas dans Internet Explorer < 9 (mais je n'ai pas tout c'est à dire avec qui j'ai pu tester), mais devrait être fonctionnelle à jour des navigateurs. Vérifié dans: Firefox 4.x, Chrome 12 et Opera 11 sur Ubuntu 11.04.

    Plus fiable de la croix-navigateur méthode consiste à utiliser un élément imbriqué (dans cet exemple, une span) au sein de la del:

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

    Couplé avec le 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 démo.

  2. 5

    J'ai utilisé une image d'arrière-plan à cette fin.

    Exemple de CSS:

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

    Où dblstrike.gif est un modèle de l'image avec deux lignes horizontales.

    Cela ne fonctionne que dans des conditions limitées, vous souhaitez par exemple avoir besoin de différentes images de fond pour les différentes polices.

  3. 3

    Une police indépendants de la taille du CSS solution:

    CSS:

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

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

    Strike.gif pourrait être un 20x1 pixel de l'image dans la couleur de la police. Juste réinitialiser background-image pour del dans des conteneurs avec différentes couleurs de texte.

  4. 2

    Vous pouvez le faire... pourquoi vous avez besoin de deux rayure au lieu de l'un des sons comme les exigences d'un pointu à poil patron qui "n'est pas fou au sujet de la police". Il est possible de pirater une solution.

    Voici le code 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>

    Maintenant le 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%;
}

    AUSSI, assurez-vous que vous exécutez en mode strict, ou vous risquez d'avoir quelques problèmes dans IE.

    Voici un jsfiddle de l'exemple

  5. 1

    Vous ne pouvez pas avoir plus d'un typographiques grève par le biais de votre texte. Tout au plus on peut avoir barré et un trait de soulignement, mais j'ai le sentiment que ce n'est pas ce que vous allez pour. Un double barré, cependant, n'est pas possible en HTML ou CSS, les propriétés de la police seule.

  6. 1

    Voici un autre code, à nouveau avec le tirage connu-dos: code Supplémentaire-exigences dans le HTML (balise span à l'intérieur de la del tag) et de la dépendance sur la taille de la police. Ce code a l'avantage qu'il permet l'utilisation de plusieurs lignes à double ligne:

    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. 0

    essayez ce qui suit: il prend en charge double barré lignes transversales et peut être utilisé dans l'ordre de la liste ou liste non ordonnée.

    Simplement de citer le texte avec <del> puis <span class='del'>. Voir ci-dessous (j'emprunte l'exemple du post précédent 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>

    Le CSS est comme ci-dessous:

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