web-dev-qa-db-fra.com

Comment changer l'épaisseur du barré/du trait linéaire en CSS?

J'utilise le text-decoration: line-through en CSS, mais je n'arrive pas à trouver un moyen de modifier l'épaisseur de la ligne sans hacks inélégants comme <hr> ou des superpositions d'images.

Existe-t-il un moyen élégant de spécifier l'épaisseur d'un trait linéaire?

htmlcssthicknessline-through
56
1077

Voici une méthode CSS pure qui ne nécessite aucun élément de wrapper inutile. En prime, vous pouvez non seulement ajuster l'épaisseur du barré, mais également contrôler sa couleur séparément de la couleur du texte:

.strikeout {
  font-size: 4em;
  line-height: 1em;
  position: relative;
}
.strikeout::after {
  border-bottom: 0.125em solid red;
  content: "";
  left: 0;
  margin-top: calc(0.125em / 2 * -1);
  position: absolute;
  right: 0;
  top: 50%;
}
<span class="strikeout">Struck out text</span>

Utilisez les couleurs RGBa pour rendre le barrage semi-transparent:

.strikeout {
  font-size: 4em;
  position: relative;
}
.strikeout::after {
  border-bottom: 0.125em solid rgba(255, 0, 0, 0.5);
  content: "";
  left: 0;
  line-height: 1em;
  margin-top: calc(0.125em / 2 * -1);
  position: absolute;
  right: 0;
  top: 50%;
}
<span class="strikeout">Struck out text</span>

Ou même faire du barré un dégradé! Utilisez simplement une background combinée avec une height, au lieu d'une border:

.strikeout {
  font-size: 4em;
  line-height: 1em;
  position: relative;
}
.strikeout::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 0, 0, 1), rgba(0, 255, 0, 1), rgba(0, 0, 255, 1), rgba(255, 255, 255, 0));
  content: "";
  height: 0.125em;
  left: 0;
  margin-top: calc(0.125em / 2 * -1);
  position: absolute;
  right: 0;
  top: 50%;
}
<span class="strikeout">Struck out text</span>

Cela fonctionne dans IE9 (sans dégradé) et plus, ou même dans IE8 si vous utilisez la syntaxe :after à virgule unique et écrivez manuellement la valeur négative margin-top au lieu d'utiliser calc().

Le principal inconvénient est que cela ne fonctionne que sur une seule ligne de texte. Mais bon, tu prends ce que tu peux avoir ;-)

88
daGUY

Cela semble être une question de longue date sans solution idéale pour les barrés multilignes.

En utilisant les dégradés CSS, vous pouvez facilement ajuster l’épaisseur de votre ligne comme ceci:

strike {
    text-decoration: none;
    background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
}

Voir la démo et le préfixe complet du fournisseur ici: http://codepen.io/pearlchen/pen/dhpxu

13
pearlchen

réponse courte: non. cela dépend de la police, c'est la même chose pour l'épaisseur du soulignement - ça change avec l'épaisseur du texte

7
knittl

J'ai une idée, mais il faudrait ajouter un élément supplémentaire pour chaque niveau d'épaisseur.

html

<span><strike>test test</strike></span><br />  
<span id="test"><strike>           </strike></span>

css

span {height:1em}
#test {position:relative;top:-1.3em}

BTW, les espaces de la deuxième partie sont spéciaux - vous devrez utiliser alt + 0160 ou alt + 255.
Vous pouvez aussi utiliser l’unité pixels sur le haut négatif lorsque vous essayez de la positionner avec précision.

Il existe une autre alternative qui consiste à utiliser d'abord text-decoration puis le style <strike> ou <del> et de voir si vous pouvez le déplacer verticalement sans déplacer le texte avec lui.

html

<span><strike>test test</strike></span>

css

span {text-decoration:line-through;color:red}
strike {position:relative;top:1px}

Les deux fonctionnent très bien ici, mais pensez à utiliser un doctype de transition car la cause <strike> est obsolète.

2
Knu

J'ai trouvé une autre approche pour le texte multiligne:

span {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII=');
  background-repeat: repeat-x;
  background-position: center; 
}

http://output.jsbin.com/weqovenopi/1/

Cette approche suppose de répéter une image (largeur 1px et hauteur npx). En outre, cela fonctionne indépendamment de la taille de la police.

Un seul inconvénient - l’arrière-plan apparaît sous le texte.

1
Goodnickoff

Je me rends compte que c'est vieux, mais il y a un moyen de le faire en utilisant des balises span imbriquées:

<span style="text-decoration: line-through; font-size: 2em;">
  <span style="font-size: 0.5em; vertical-align: middle;">
    Striked Text
  </span>
</span>

Le texte barré dépend de la taille de la police. Par conséquent, si vous doublez l'étendue extérieure, le trait sera deux fois plus épais. Ensuite, vous devez réduire l’intérieur de moitié. L'alignement vertical est nécessaire ou bien la ligne est trop haute, ce qui la fait apparaître comme un surlignage.

En action: http://jsfiddle.net/moodleboy/deep3qw8/

Travaille dans Chrome/ FF, mais pas Safari, IE10 ou Opera. Fonctionne sur Chrome sur Mac, mais pas Windows.

1
Paul

Non.

Cependant, si la couleur barrée est la même que la couleur du texte, vous pouvez facilement vous passer d'une image personnalisée en arrière-plan.

Si vous avez besoin de couleurs différentes, la seule solution est de superposer l’image barrée personnalisée.

1
Matt

Comme je ne pouvais pas trouver de méthode appropriée ici, j'ai utilisé Image-fond avec un linear-gradient et ex unités de longueur CSS .

Malheureusement, cela signifie que l'utilisation de faces de police différentes rendra le texte barré dans une position légèrement différente (si les polices ont une hauteur x différente). 

.container {
  width: 300px;
}

.multiline-strikethrough {
  display: inline;
  background-image: linear-gradient(transparent 0.8ex, red 0.8ex, red 1.5ex, transparent 1.5ex);
}

.alt-1 {
  font-family: sans-serif;
  font-size: 2rem;
}

.alt-2 {
  font-family: sans-serif;
  font-size: 4rem;
  line-height 1;
}
<div class="container">
  <p class="multiline-strikethrough">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, odio a consequat eleifend, leo ex tincidunt magna.</p>
</div>

<div class="container">
  <p class="multiline-strikethrough alt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, odio a consequat eleifend, leo ex tincidunt magna.</p>
</div>

<div class="container">
  <p class="multiline-strikethrough alt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, odio a consequat eleifend, leo ex tincidunt magna.</p>
</div>

0
ksav

L'épaisseur du trait est déterminée par la police (famille, taille, etc.). CSS ne contient aucune disposition permettant de changer cela http://www.w3.org/TR/REC-CSS1/#text-decoration

0
Bradley Mountford

Cela ne répond pas à la question, mais est pertinent en ce sens que cela résout le problème de l'absence d'une frappe unique utilisant des scripts. Je ne suis pas un puriste, mais j'estime qu'il s'agit d'une solution x-browser.

<html>
<script src="/js/jquery/jquery.js"></script>
<script>
function do_strike_out(idx)
{
  $(this).wrap("<span style='position:relative;left:0px;top:0px;'>").
    before( "<span style='margin-top:10px;border-top:1px solid #FF0000;"+
      "position:absolute;width:100%;left:0px;'></span>" ).
    wrap("<span style='position:relative;left:0px;top:0px;'>");
}
$(function(){
  $('.strike_out').each(do_strike_out);
});
</script>
<body>
A jquery hack to do colored strike-through <span class='strike_out'>STRIKE-OUT</span>, which, I realize does not answer your question, sorry, but may be of intest for others.
</body>
</html>
0
underdog