80

私はCSSで使用していますが、画像オーバーレイtext-decoration: line-throughのようなエレガントでないハックなしで線の太さを変える方法を見つけることができないようです。<hr>

ラインスルーの太さを指定するエレガントな方法はありますか？

4

11 に答える 11

116

最新の解決策は、text-decoration-thicknessプロパティを使用することです。

text-decoration-thickness: 1px;

text-decoration-colorプロパティを使用して色を変更することもできます。

text-decoration-color: #ff0000aa;

古いブラウザーの場合は、次の回避策のいずれかを使用できます。

これは、不要なラッパー要素を必要としない純粋な CSS メソッドです。追加のボーナスとして、取り消し線の太さを調整できるだけでなく、その色をテキストの色とは別に制御できます。

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

RGBa カラーを使用して取り消し線を半透明にします。

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

または、取り消し線をグラデーションにすることもできます! の代わりに ,backgroundと組み合わせて使用​​するだけです。heightborder

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

これは IE9 (sans gradient) 以降で機能します。シングルコロン:after構文margin-topを使用し、calc().

主な欠点は、これが 1 行のテキストでしか機能しないことです。でもねえ、あなたはあなたが得ることができるものを取ります;-)

于 2013-05-07T02:23:32.833 に答える
9

短い答え：いいえ。フォントにもよりますが、下線の太さも同じで、文字の太さで変わります

于 2010-03-29T15:41:10.013 に答える
2

複数行テキストの別のアプローチを見つけました：

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

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

このアプローチは、画像を繰り返すことを前提としています (幅 1px、高さ npx)。また、フォントサイズに依存せずに機能します。

唯一の欠点は、背景がテキストの下に表示されることです。

于 2015-05-13T15:42:14.587 に答える
2

アイデアはありますが、厚さのレベルごとに要素を追加する必要があります。

html

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

CSS

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

ところで、2 番目のスパンのスペースは特殊です。alt+0160 または alt+255 を使用する必要があります。
正確に配置しようとする場合は、負の上部でもピクセル単位を使用できます。

最初に text-decorationを使用してから styleを使用するか、テキストを移動せずに垂直方向に微調整できるかどう<strike>かを確認する別の方法があります。<del>

html

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

CSS

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

ここでは両方とも問題なく動作していますが、移行用の Doctype を使用することを忘れないでください。原因<strike>は非推奨です。

于 2010-03-30T05:35:29.713 に答える
1

いいえ。

ただし、取り消し線の色がテキストの色と同じである場合は、背景にカスタム イメージを使用することで簡単に回避できます。

別の色が必要な場合は、カスタムの取り消し線画像を重ねるしかありません。

于 2010-03-29T15:41:04.037 に答える
1

これは古いと思いますが、ネストされたスパンタグを使用してそれを行う方法があります:

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

取り消し線はフォントのサイズに依存するため、外側のスパンを 2 倍にすると、線の太さが 2 倍になります。次に、内側のものを半分に減らす必要があります。垂直方向の配置が必要です。そうしないと、線が高すぎて、ほとんど上線のように見えます。

実際: http://jsfiddle.net/moodleboy/deep3qw8/

Chrome /FFでは動作しますが、Safari、IE10、Opera では動作しません。Mac の Chrome では動作しますが、Windows では動作しません。

于 2015-01-08T03:24:06.083 に答える
1

線の太さは、フォント (ファミリ、サイズなど) によって決まります。これを変更するための CSS の規定はありませんhttp://www.w3.org/TR/REC-CSS1/#text-decoration

于 2010-03-29T15:49:51.730 に答える
0

これは質問に答えませんが、スクリプトを使用して独自の取り消し線の欠如を解決するという点で関連性があります。私は純粋主義者ではありませんが、これはxブラウザソリューションだと思います。

<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>
于 2010-10-21T23:24:06.223 に答える
-1

ここで適切な方法を見つけることができなかったので、線形グラデーションとex CSS length unitsを使用して background-image を使用しました。

残念ながら、これは、異なるフォント フェースを使用すると、取り消し線がわずかに異なる位置にレンダリングされることを意味します (たとえば、フォントの x 高さが異なる場合)。

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

于 2018-10-24T11:22:30.827 に答える