J'utilise le text-decoration: line-through en CSS, mais je n'arrive pas à trouver un moyen de faire varier l'épaisseur de ligne sans hacks inélégants comme <hr> ou des superpositions d'image.Comment changer l'épaisseur de barrage/traversée dans CSS?
Existe-t-il un moyen élégant de spécifier l'épaisseur d'un passage?
n °
Cependant, si la couleur de traversée est la même que la couleur du texte, vous pouvez facilement vous contenter d'utiliser une image personnalisée en arrière-plan.
Si vous avez besoin de couleurs différentes, il vous suffit de superposer l'image personnalisée.
J'ai trouvé que cela fonctionne pour différentes couleurs: http://stackoverflow.com/questions/1107551/css-strikethrough-different-color-from-text Le seul obstacle est l'épaisseur. Je ne trouve pas non plus de solutions faciles ... peut-être que cela ne vaut pas la peine d'être poursuivi. – 1077
Réponse courte: non. cela dépend de la police, il en est de même pour l'épaisseur du trait de soulignement - elle change avec l'épaisseur du texte
L'épaisseur de ligne est déterminée par la police (famille, taille, etc.). Il n'y a aucune disposition dans CSS pour changer cela http://www.w3.org/TR/REC-CSS1/#text-decoration
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 dans la deuxième travée sont spéciaux - vous devrez utiliser alt + alt + 0160 ou 255.
Vous pouvez également utiliser l'unité de pixels sur le sommet négatif lorsque vous essayez de la positionner avec précision.
Il existe une autre alternative qui implique l'utilisation première text-decoration et le style <strike> ou <del> et voyez si vous pouvez pousser verticalement sans déplacer le texte avec elle.
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, mais rappelez-vous d'utiliser une transition doctype la cause <strike> a été désapprouvée.
Au lieu d'utiliser 'strike', utilisez' text-decoration: line-through'. – Ariel
@ariel as-tu lu ses questions? – Knu
Oui, je l'ai lu. Je comprends votre solution avec deux niveaux d'éléments. Mais vous devriez changer le 'strike 'intérieur pour être un autre' span' avec css. Y a-t-il une raison pour laquelle vous devez * utiliser 'strike'? – Ariel
Ceci ne répond pas à la question, mais est pertinent dans la mesure où il résout l'absence d'une frappe unique à l'aide de scripts. Je ne suis pas un puriste, mais je crois que c'est une solution de x-navigateur.
<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>
Voici une méthode CSS pure qui ne nécessite aucun élément wrapper inutile.En prime, vous pouvez non seulement ajuster l'épaisseur du retrait sur des prises, mais vous pouvez 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 des couleurs RGBA pour faire le semi-strikeout 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 faites du barré un dégradé! Il suffit d'utiliser un background combiné avec un height, à la place d'un 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 (gradient de sans) et jusqu'à - ou même IE8 si vous utilisez le seul colon :after syntaxe et écrire 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, vous prenez ce que vous pouvez obtenir ;-)
merci l'homme, cette solution fonctionne très bien! – dav
Bien! Mais toutes les façons de le faire fonctionner sur plusieurs lignes? Merci! – user2335065
@ user2335065: Hmm ... enroulez chaque ligne de texte dans un 'div', puis utilisez' .strikeout div :: after'? Bien sûr, cela ne fonctionnera pas si le texte (et/ou la largeur des lignes) est dynamique ... – daGUY
Cela semble être une question de longue date sans une solution idéale pour barré multi-lignes.
Idéalement, en utilisant des gradients CSS, vous pouvez facilement ajuster l'épaisseur de la ligne comme ceci:
strike {
text-decoration: none;
background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
}
Voir la démo et complète fournisseur préfixer ici: http://codepen.io/pearlchen/pen/dhpxu
cela fonctionne très bien, merci – Vnge
Je sais que c'est vieux, mais il est une façon de le faire en utilisant les 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>
est dépendant de Strikethrough la taille de la police, donc si vous doublez la durée extérieure, il wil Je rends la ligne deux fois plus épaisse. Ensuite, vous devez réduire l'interne de moitié. L'alignement vertical est nécessaire, sinon la ligne est trop haute, ce qui donne l'impression d'être presque une ligne.
en action: http://jsfiddle.net/moodleboy/deep3qw8/
Travaux dans
Chrome
/FF, mais pas Safari, IE10 ou Opera. Fonctionne sur Chrome sur Mac, mais pas Windows.
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 la répétition d'une image (largeur de 1px et la hauteur npx). En outre, il fonctionne indépendamment de la taille de la police.
Un seul inconvénient - rend l'arrière-plan sous le texte.
Vous pouvez vérifier [transparent strikethrought sur le texte] (http://stackoverflow.com/questions/24082524/css-text-with-transparent-strikethrought) pour un effet de transparence sur le texte. –