Html 如何更改 CSS 中的删除线/贯穿线粗细？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2539207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the strike-out / line-through thickness in CSS?
提问by 1077
I'm using the text-decoration: line-throughin CSS, but I can't seem to find any way to vary the line thickness without inelegant hacks like <hr>or image overlays.
我正在使用text-decoration: line-throughCSS 中的 ，但我似乎无法找到任何方法来改变线条粗细而没有像<hr>或图像叠加这样的不雅技巧。
Is there any elegant way to specify the thickness of a line-through?
有没有什么优雅的方法来指定一条线的粗细？
回答by daGUY
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:
这是一个纯 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>Use RGBa colors to make the strikeout semi-transparent:
使用 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>Or even make the strikeout a gradient! Just use a backgroundcombined with a height, in place of a border:
甚至使三振出局渐变！只需使用 abackground与a组合height代替 a 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>This works in IE9 (sans gradient) and up – or even IE8 if you use the single-colon :aftersyntax and manually write the negative margin-topvalue instead of using calc().
这适用于 IE9（无渐变）及更高版本——甚至 IE8，如果您使用单冒号:after语法并手动写入负值margin-top而不是使用calc().
The main downside is that this only works on a single line of text. But hey, you take what you can get ;-)
主要的缺点是这只适用于单行文本。但是，嘿，你拿走你能得到的 ;-)
回答by pearlchen
This seems to be a longstanding question without an ideal solution for multi-line strikethroughs.
这似乎是一个长期存在的问题，没有多行删除线的理想解决方案。
Conveniently, using CSS gradients, you can easily adjust your line thickness like so:
方便地，使用 CSS 渐变，您可以轻松地调整线条粗细，如下所示：
strike {
text-decoration: none;
background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
}
See the demo and full vendor prefixing here: http://codepen.io/pearlchen/pen/dhpxu
在此处查看演示和完整的供应商前缀：http: //codepen.io/pearlchen/pen/dhpxu
回答by knittl
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
简短的回答：没有。这取决于字体，下划线的粗细是一样的——它随着文本的粗细而变化
回答by Knu
I have an idea but it would require adding an additional element for each level of thickness.
我有一个想法，但它需要为每个厚度级别添加一个额外的元素。
html
html
<span><strike>test test</strike></span><br />
<span id="test"><strike> </strike></span>
css
css
span {height:1em}
#test {position:relative;top:-1.3em}
BTW the spaces in the second span are specials - you will have to use alt+0160 or alt+255.
You can use pixels unit too on the negative top when ull try to position it precisely.
顺便说一句，第二个跨度中的空格是特殊的 - 您必须使用 alt+0160 或 alt+255。
当您尝试精确定位时，您也可以在负顶部使用像素单位。
There is another alternative which involve using first text-decorationand then style <strike>or <del>and see if you can nudge it vertically without moving the text with it.
还有另一种选择，它涉及首先使用文本装饰，然后使用样式，<strike>或者<del>看看是否可以垂直轻推它而不用它移动文本。
html
html
<span><strike>test test</strike></span>
css
css
span {text-decoration:line-through;color:red}
strike {position:relative;top:1px}
Both are working fine here, but remember to use a transitional doctype cause <strike>has been deprecated.
两者都在这里工作正常，但请记住使用过渡文档类型原因<strike>已被弃用。
回答by Matt
No.
不。
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.
但是，如果删除线颜色与文本颜色相同，您可以轻松地在背景中使用自定义图像。
If you require different colors, then overlaying the custom strike-through image is the only way to go.
如果您需要不同的颜色，则覆盖自定义删除线图像是唯一的方法。
回答by Paul
I realize this is old, but there is a way to do it using nested span tags:
我意识到这是旧的，但是有一种方法可以使用嵌套的 span 标签来做到这一点：
<span style="text-decoration: line-through; font-size: 2em;">
<span style="font-size: 0.5em; vertical-align: middle;">
Striked Text
</span>
</span>
Strikethrough is dependent upon the size of the font, so if you double the outer span it will make the line twice as thick. Then, you need to reduce the inner one by half. The vertical-align is necessary or else the line is too high, making it appear to almost be an overline.
删除线取决于字体的大小，因此如果将外跨度加倍，则线条的粗细将增加一倍。然后，您需要将内部减少一半。垂直对齐是必要的，否则线太高，使它看起来几乎是上划线。
In action: http://jsfiddle.net/moodleboy/deep3qw8/
在行动：http: //jsfiddle.net/moodleboy/deep3qw8/
Works in Chrome/FF, but not Safari, IE10 or Opera. Works on Chrome on Mac, but not Windows.
适用于Chrome/FF，但不适用于 Safari、IE10 或 Opera。适用于 Mac 上的 Chrome，但不适用于 Windows。
回答by Goodnickoff
I've found another approach for multiline text:
我找到了另一种多行文本的方法：
span {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII=');
background-repeat: repeat-x;
background-position: center;
}
http://output.jsbin.com/weqovenopi/1/
http://output.jsbin.com/weqovenopi/1/
This approach assumes repeating an image (1px width and npx height). Also it works independent on the font-size.
此方法假设重复图像（1px 宽度和 npx 高度）。它也独立于字体大小工作。
Only one disadvantage - background renders under the text.
只有一个缺点 - 背景呈现在文本下方。
回答by ksav
I couldn't find an appropriate method here so I used background-image with a linear-gradientand exCSS length units.
我在这里找不到合适的方法，所以我使用了带有线性渐变和前CSS 长度单位的背景图像。
Unfortunately this means that using different font faces will render the strikethrough in a slightly different position (if the fonts have different x-heights).
不幸的是，这意味着使用不同的字体会在稍微不同的位置呈现删除线（如果字体具有不同的 x 高度）。
.container {
width: 300px;
}
.multiline-strikethrough {
display: inline;
background-image: linear-gradient(transparent 0.8ex, red 0.8ex, red 1.5ex, transparent 1.5ex);
}
.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>回答by Bradley Mountford
The line thickness is determined by the font (family, size, etc.). There is no provision in CSS for changing this http://www.w3.org/TR/REC-CSS1/#text-decoration
线条粗细由字体（系列、大小等）决定。CSS 中没有规定更改此http://www.w3.org/TR/REC-CSS1/#text-decoration
回答by underdog
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.
这并没有回答这个问题，但很重要，因为它解决了使用脚本编写唯一删除线的问题。我不是纯粹主义者，但我相信这是一个 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>
