Wie ändere ich die Strike-Out / Line-Through-Dicke in CSS?

Ich verwende das text-decoration: line-throughin CSS, aber ich kann anscheinend keine Möglichkeit finden, die Linienstärke ohne unelegante Hacks wie <hr>oder Bildüberlagerungen zu variieren .

Gibt es eine elegante Möglichkeit, die Dicke eines Durchgangs festzulegen?

Hier ist eine reine CSS-Methode, für die keine unnötigen Wrapper-Elemente erforderlich sind. Als zusätzlichen Bonus können Sie nicht nur die Dicke des Strikeouts anpassen, sondern auch dessen Farbe getrennt von der Textfarbe steuern:

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

Verwenden Sie RGBa-Farben, um den Strikeout halbtransparent zu machen:

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

Oder machen Sie den Strikeout sogar zu einem Gefälle! Verwenden Sie einfach eine backgroundKombination mit a heightanstelle von 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>

Dies funktioniert in IE9 (ohne Farbverlauf) und höher - oder sogar in IE8, wenn Sie die Ein-Doppelpunkt- :afterSyntax verwenden und den negativen margin-topWert manuell schreiben , anstatt ihn zu verwendencalc() .

Der Hauptnachteil ist, dass dies nur für eine einzelne Textzeile funktioniert. Aber hey, du nimmst was du bekommen kannst ;-)

Dies scheint eine langjährige Frage ohne eine ideale Lösung für mehrzeilige Durchstreichungen zu sein.

Mit CSS-Verläufen können Sie Ihre Linienstärke bequem wie folgt anpassen:

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

Die Demo und das vollständige Herstellerpräfix finden Sie hier: http://codepen.io/pearlchen/pen/dhpxu

kurze Antwort: nein. Dies hängt von der Schriftart ab. Dies gilt auch für die Dicke der Unterstreichung. Sie ändert sich mit der Dicke des Texts

Ich habe eine Idee, aber es würde das Hinzufügen eines zusätzlichen Elements für jede Dickenstufe erfordern.

html

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

CSS

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

Übrigens sind die Leerzeichen in der zweiten Spanne Sonderangebote - Sie müssen alt + 0160 oder alt + 255 verwenden.
Sie können die Pixeleinheit auch auf der negativen Oberseite verwenden, wenn Sie versuchen, sie genau zu positionieren.

Es gibt eine andere Alternative, bei der zuerst die Textdekoration und dann der Stil <strike>oder <del>die Möglichkeit verwendet werden, sie vertikal zu verschieben, ohne den Text damit zu verschieben.

html

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

CSS

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

Beide funktionieren hier einwandfrei, aber denken Sie daran, eine vorübergehende Doctype-Ursache zu verwenden, <strike>die veraltet ist.

Ich habe einen anderen Ansatz für mehrzeiligen Text gefunden:

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

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

Bei diesem Ansatz wird davon ausgegangen, dass ein Bild wiederholt wird (1 Pixel Breite und n Pixel Höhe). Es funktioniert auch unabhängig von der Schriftgröße.

Nur ein Nachteil - Hintergrund wird unter dem Text gerendert.

Nein.

Wenn die durchgestrichene Farbe jedoch mit der Textfarbe übereinstimmt, können Sie problemlos ein benutzerdefiniertes Bild im Hintergrund verwenden.

Wenn Sie unterschiedliche Farben benötigen, können Sie nur das benutzerdefinierte Durchgestrichene Bild überlagern.

Mir ist klar, dass dies alt ist, aber es gibt eine Möglichkeit, dies mit verschachtelten Span-Tags zu tun:

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

Das Durchstreichen hängt von der Größe der Schriftart ab. Wenn Sie also die äußere Spannweite verdoppeln, wird die Linie doppelt so dick. Dann müssen Sie die innere um die Hälfte reduzieren. Die vertikale Ausrichtung ist erforderlich, oder die Linie ist zu hoch, sodass sie fast wie eine Überlinie erscheint.

In Aktion: http://jsfiddle.net/moodleboy/deep3qw8/

Funktioniert in Chrome / FF, jedoch nicht in Safari, IE10 oder Opera. Funktioniert unter Chrome unter Mac, jedoch nicht unter Windows.

Die Linienstärke wird durch die Schriftart (Familie, Größe usw.) bestimmt. In CSS ist keine Änderung dieser http://www.w3.org/TR/REC-CSS1/#text-decoration vorgesehen

Dies beantwortet die Frage nicht, ist jedoch insofern relevant, als es das Fehlen eines eindeutigen Durchschlags mithilfe von Skripten behebt. Ich bin kein Purist, aber ich glaube, dies ist eine X-Browser-Lösung.

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

Ich konnte hier keine geeignete Methode finden, also habe ich ein Hintergrundbild mit einem linearen Gradienten und ex CSS-Längeneinheiten verwendet .

Leider bedeutet dies, dass durch die Verwendung unterschiedlicher Schriftflächen das Durchgestrichen an einer etwas anderen Position gerendert wird (wenn die Schriftarten beispielsweise unterschiedliche x-Höhen haben).

.container {
  width: 300px;
}

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

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