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

77

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?

1077
quelle
Sie können transparente Strikeethrought auf Text auf einen transparenten Strike durch Wirkung auf Text überprüfen .
Web-Tiki

Antworten:

108

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

daGUY
quelle
8
Nett! Aber gibt es Möglichkeiten, wie es in mehreren Zeilen funktioniert? Vielen Dank!
user2335065
@ user2335065: Hmm ... jede Textzeile in ein Zeilenumbruch einfügen divund dann verwenden .strikeout div::after? Natürlich funktioniert das nicht, wenn der Text (und / oder die Breite der Linien) dynamisch ist ...
daGUY
Diese Lösung funktioniert perfekt in einer einzigen Textzeile
Franz
Welchen Wert setze ich für IE8 für margin-top, wenn ich nicht calc () verwende?
Jen
Arbeitete für meinen Fall, aber ich musste die Schriftgröße fallen lassen: 4em; Zeilenhöhe: 1em;.
HoldOffHunger
24

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

Perlmutt
quelle
1
Netter Trick, aber dies ist besser mit relativen Einheiten geschrieben. So etwas wie background-image: linear-gradient(transparent 45%, #cc1f1f 45% 55%, transparent 55%);(Einheiten sind standardmäßig relativ zur Elementhöhe).
Tey '17.
tolle Lösung.
Hebe
Wird
9

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

stricken
quelle
2

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.

Knu
quelle
Anstatt Verwendung zu strikeverwenden text-decoration: line-through.
Ariel
Ja, ich habe es gelesen. Ich verstehe Ihre Lösung mit zwei Ebenen von Elementen. Aber Sie sollten das Innere ändern strike, um spanmit CSS ein anderes zu sein. Gibt es einen Grund , warum Sie müssen verwenden strike?
Ariel
@ariel Wenn Sie 2 Bereiche verwenden, müssen Sie Klassen oder IDs verwenden, um sie abzugleichen. Es ist einfach bequemer.
Knu
Sie können die untergeordnete CSS-Auswahl verwenden. span>span { .. }
Ariel
1
touché :) Aber vielleicht solltest du die Antwort aktualisieren, da die Leute das heute noch wollen.
Ariel
2

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.

Goodnickoff
quelle
1

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.

Matt
quelle
Ich habe festgestellt, dass dies für verschiedene Farben funktioniert : stackoverflow.com/questions/1107551/… Das einzige Hindernis ist die Dicke. Ich kann auch keine einfachen Lösungen finden ... vielleicht lohnt es sich nicht, diese zu verfolgen.
1077
1

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.

Paul
quelle
0

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>
Außenseiter
quelle
-1

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>

ksav
quelle