blocks|key|1075444|text|不是的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1075445|但是，如果删除线颜色与文本颜色相同，则可以轻松地在背景中使用自定义图像。|1075446|如果您需要不同的颜色，那么覆盖自定义删除线图像是唯一的方法。|1075447|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>No.</p>

<p>However, if the strike-through color is the same as the text color, you can easily get away with using a custom image in the background.</p>

<p>If you require different colors, then overlaying the custom strike-through image is the only way to go.</p>


blocks|key|1290336|text|简短的回答是:不。这取决于字体，下划线的粗细也是一样的-它随文本的粗细而变化|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1290337|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>short answer: no. it depends on the font, it's the same for the thickness of underline—it changes with the thickness of the text</p>


blocks|key|1075509|text|线条粗细由字体(系列、大小等)决定。CSS中没有用于更改此http://www.w3.org/TR/REC-CSS1/#text-decoration的规定。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1075510|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/REC-CSS1/#text-decoration^0|T|1A|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>The line thickness is determined by the font (family, size, etc.).  There is no provision in CSS for changing this <a href="http://www.w3.org/TR/REC-CSS1/#text-decoration" rel="nofollow noreferrer">http://www.w3.org/TR/REC-CSS1/#text-decoration</a></p>


blocks|key|1290453|text|这并没有回答这个问题，但相关的是，它解决了使用脚本的独特删除线的缺乏。我不是一个纯粹主义者，但我相信这是一个x-browser解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1290454|<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;"%2B
++++++"position:absolute;width:100%25;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>|code-block|syntax|javascript|1290455|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This does not answer the question, but is relevant in that it solves the lack of a unique strike-through using scripting. I am not a purist, but I believe this is a x-browser solution.</p>

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


blocks|key|1290539|text|现代的解决方案是使用text-decoration-thickness属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1290540|text-decoration-thickness:+1px;|code-block|syntax|javascript|1290541|也可以使用text-decoration-color属性更改颜色。|1290542|text-decoration-color:+#ff0000aa;|1290543|对于较旧的浏览器，您可以使用以下解决方法之一：|1290544|下面是一个纯CSS方法，它不需要任何不必要的包装元素。作为一个额外的好处，您不仅可以调整删除线的粗细，还可以从文本颜色中单独控制其颜色：|1290545|​|1290546|.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%25;
}|1290547|<span+class="strikeout">Struck+out+text</span>|1290548|1290549|使用RGBa颜色使删除线半透明：|1290550|1290551|.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%25;
}|1290552|<span+class="strikeout">Struck+out+text</span>|1290553|1290554|甚至让三振出局成为一个梯度！只需使用结合了height的background，而不是border|style|CODE|1290555|1290556|.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%25;
}|1290557|<span+class="strikeout">Struck+out+text</span>|1290558|1290559|这适用于IE9+(sans渐变)和up+-甚至IE8，如果您使用单冒号:after语法并手动写入负的margin-top值，而不是使用calc()。|1290560|主要的缺点是，这只适用于一行文本。但是，嘿，你拿你能得到的;-)|1290561|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness|1|https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color^0|A|P|0|0|0|5|L|1|0|0|0|0|0|0|0|0|0|0|0|0|0|L|6|S|A|16|6|0|0|0|0|0|Z|6|1E|A|1V|6|0|0^^$0|@$1|2|3|4|5|6|7|1T|8|@]|9|@$A|1U|B|1V|1|1W]]|C|$]]|$1|D|3|E|5|F|7|1X|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|1Y|8|@]|9|@$A|1Z|B|20|1|21]]|C|$]]|$1|K|3|L|5|F|7|22|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|23|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|24|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|25|8|@]|9|@]|C|$]]|$1|S|3|T|5|F|7|26|8|@]|9|@]|C|$G|H]]|$1|U|3|V|5|F|7|27|8|@]|9|@]|C|$G|H]]|$1|W|3|R|5|6|7|28|8|@]|9|@]|C|$]]|$1|X|3|Y|5|6|7|29|8|@]|9|@]|C|$]]|$1|Z|3|R|5|6|7|2A|8|@]|9|@]|C|$]]|$1|10|3|11|5|F|7|2B|8|@]|9|@]|C|$G|H]]|$1|12|3|13|5|F|7|2C|8|@]|9|@]|C|$G|H]]|$1|14|3|R|5|6|7|2D|8|@]|9|@]|C|$]]|$1|15|3|16|5|6|7|2E|8|@$A|2F|B|2G|17|18]|$A|2H|B|2I|17|18]|$A|2J|B|2K|17|18]]|9|@]|C|$]]|$1|19|3|R|5|6|7|2L|8|@]|9|@]|C|$]]|$1|1A|3|1B|5|F|7|2M|8|@]|9|@]|C|$G|H]]|$1|1C|3|1D|5|F|7|2N|8|@]|9|@]|C|$G|H]]|$1|1E|3|R|5|6|7|2O|8|@]|9|@]|C|$]]|$1|1F|3|1G|5|6|7|2P|8|@$A|2Q|B|2R|17|18]|$A|2S|B|2T|17|18]|$A|2U|B|2V|17|18]]|9|@]|C|$]]|$1|1H|3|1I|5|6|7|2W|8|@]|9|@]|C|$]]|$1|1J|3|-4|5|6|7|2X|8|@]|9|@]|C|$]]]|1K|$1L|$5|1M|1N|1O|C|$1P|1Q]]|1R|$5|1M|1N|1O|C|$1P|1S]]]]

<p>The modern solution is to use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness" rel="nofollow noreferrer">text-decoration-thickness</a> property.</p>
<pre><code>text-decoration-thickness: 1px;
</code></pre>
<p>You can also change the color using the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color" rel="nofollow noreferrer">text-decoration-color</a> property.</p>
<pre><code>text-decoration-color: #ff0000aa;
</code></pre>
<p>For older browsers, you can use one of these workarounds:</p>
<p>Here's a pure CSS method that doesn't require any unnecessary wrapper elements. As an added bonus, not only can you adjust the thickness of the strikeout, but you can control its color separately from the text color:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="strikeout"&gt;Struck out text&lt;/span&gt;</code></pre>
</div>
</div>
</p>
<p>Use RGBa colors to make the strikeout semi-transparent:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="strikeout"&gt;Struck out text&lt;/span&gt;</code></pre>
</div>
</div>
</p>
<p>Or even make the strikeout a gradient! Just use a <code>background</code> combined with a <code>height</code>, in place of a <code>border</code>:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="strikeout"&gt;Struck out text&lt;/span&gt;</code></pre>
</div>
</div>
</p>
<p>This works in IE9 (sans gradient) and up – or even IE8 if you use the single-colon <code>:after</code> syntax and manually write the negative <code>margin-top</code> value instead of using <code>calc()</code>.</p>
<p>The main downside is that this only works on a single line of text. But hey, you take what you can get ;-)</p>


blocks|key|1075688|text|这似乎是一个长期存在的问题，对于多行删除没有理想的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1075689|使用CSS渐变可以方便地调整线条粗细，如下所示：|1075690|strike+{
++++text-decoration:+none;
++++background-image:+linear-gradient(transparent+7px,#cc1f1f+7px,#cc1f1f+9px,transparent+9px);
}|code-block|syntax|javascript|1075691|请在此处查看演示和完整的供应商前缀：http://codepen.io/pearlchen/pen/dhpxu|offset|length|1075692|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/pearlchen/pen/dhpxu^0|0|0|0|I|11|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>This seems to be a longstanding question without an ideal solution for multi-line strikethroughs.</p>

<p>Conveniently, using CSS gradients, you can easily adjust your line thickness like so:</p>

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

<p>See the demo and full vendor prefixing here: <a href="http://codepen.io/pearlchen/pen/dhpxu">http://codepen.io/pearlchen/pen/dhpxu</a></p>


blocks|key|1075727|text|我发现了另一种处理多行文本的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1075728|span+{
++background:+url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII=');
++background-repeat:+repeat-x;
++background-position:+center;+
}|code-block|syntax|javascript|1075729|http://output.jsbin.com/weqovenopi/1/|offset|length|1075730|此方法假定重复图像(1px宽和npx高)。此外，它的工作独立于字体大小。|1075731|只有一个缺点-背景渲染在文本下。|1075732|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|11|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@$I|Y|J|Z|1|10]]|A|$]]|$1|K|3|L|5|6|7|11|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|H]]]]

<p>I've found another approach for multiline text:</p>

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

<p><a href="http://output.jsbin.com/weqovenopi/1/" rel="nofollow">http://output.jsbin.com/weqovenopi/1/</a></p>

<p>This approach assumes repeating an image (1px width and npx height). Also it works independent on the font-size.</p>

<p>Only one disadvantage - background renders under the text.</p>


blocks|key|1075818|text|现在，这非常容易，使用下面的CSS|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1075819|text-decoration-thickness:+1px;|code-block|syntax|javascript|1075820|您可以根据需要调整厚度。|1075821|可以像这样改变颜色|1075822|text-decoration-color:+red;|1075823|受主要浏览器支持|1075824|​|1075825|📷|atomic|offset|length|1075826|1075827|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/8711a78bc500bf4483d45a92544f4141.png|imageAlt^0|0|0|0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|17|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|18|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1C|8|@]|9|@$T|1D|U|1E|1|1F]]|A|$]]|$1|V|3|P|5|6|7|1G|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13|14|-4]]]]

<p>This is super easy these days, Use the following CSS</p>
<pre><code>text-decoration-thickness: 1px;
</code></pre>
<p>You can adjust the thickness according to your needs.</p>
<p>Can change the color like this</p>
<pre><code>text-decoration-color: red;
</code></pre>
<p>Supported by main browsers</p>
<p><a href="https://i.stack.imgur.com/nhr0C.png" rel="noreferrer"><img src="https://i.stack.imgur.com/nhr0C.png" alt="enter image description here" /></a></p>


<p>I'm using the <code>text-decoration: line-through</code> in CSS, but I can't seem to find any way to vary the line thickness without inelegant hacks like <code>&lt;hr&gt;</code> or image overlays.</p>

<p>Is there any elegant way to specify the thickness of a line-through?</p>


How to change the strike-out / line-through thickness in CSS?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我正在使用CSS中的text-decoration: line-through，但我似乎找不到任何方法来改变线条粗细，而不使用<hr>或图像覆盖等不雅的技巧。有没有什么优雅的方法来指定划线的粗细？

问如何更改CSS中的删除线/划线粗细？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何更改CSS中的删除线/划线粗细？EN