html-如何更改CSS中的删除线/穿线厚度?

我在CSS中使用了text-decoration: line-through,但是在没有诸如<hr>之类的不雅技巧的情况下,我似乎找不到任何改变线宽的方法。

是否有任何优雅的方法来指定直通线的厚度?

1077 asked 2019-10-09T11:57:09Z
10个解决方案
89 votes

这是一个纯CSS方法,不需要任何不必要的包装器元素。 另外,您不仅可以调整删除线的粗细,而且可以与文本颜色分开控制其颜色:

:after
:after

使用RGBa颜色使删除线为半透明:

:after
:after

甚至使三叉戟成为渐变! 只需将:aftermargin-top结合使用,以代替calc()

:after
:after

它在IE9(无梯度)和更高版本中有效-甚至在IE8中(如果您使用单冒号:after并手动编写负的margin-top值而不是使用calc())。

主要缺点是,这仅适用于一行文本。 但是,嘿,您会尽力而为;-)

daGUY answered 2019-10-09T11:58:19Z
14 votes

如果没有针对多行删除线的理想解决方案,这似乎是一个长期存在的问题。

方便地,使用CSS渐变,您可以像这样轻松地调整线条粗细:

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

在此处查看演示和完整的供应商前缀:[http://codepen.io/pearlchen/pen/dhpxu]

pearlchen answered 2019-10-09T11:59:07Z
7 votes

简短的回答:不。 它取决于字体,下划线的粗细是相同的-它随文本的粗细而变化

knittl answered 2019-10-09T11:59:36Z
2 votes

我有一个主意,但需要为每个厚度级别添加一个附加元素。

HTML

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

CSS

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

第二个跨度中的空格之间是特殊的-您将必须使用alt + 0160或alt + 255。
当完全尝试精确定位像素时,也可以在负数顶部使用像素单位。


还有另一种选择,涉及先使用文本装饰,然后再使用样式<strike><del>,看看是否可以垂直移动它而不用移动文本。

HTML

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

CSS

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

两者在这里都可以正常工作,但是请记住使用过渡文档类型,因为<strike>已被弃用。

Knu answered 2019-10-09T12:00:50Z
1 votes

没有。

但是,如果删除线颜色与文本颜色相同,则可以轻松地在后台使用自定义图像。

如果需要不同的颜色,则叠加自定义删除线图像是唯一的方法。

Matt answered 2019-10-09T12:01:27Z
1 votes

我意识到这很老了,但是有一种使用嵌套span标签的方法:

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

删除线取决于字体的大小,因此,如果将外部跨度加倍,它将使行的宽度加倍。 然后,您需要将内部空间减少一半。 垂直对齐是必需的,否则线条太高,使其看起来几乎是上划线。

实际中:[http://jsfiddle.net/moodleboy/deep3qw8/]

适用于Chrome / FF,但不适用于Safari,IE10或Opera。 在Mac上的Chrome上运行,但在Windows上不行。

Paul answered 2019-10-09T12:02:16Z
1 votes

我发现了多行文本的另一种方法:

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)。 它也可以独立于字体大小工作。

只有一个缺点-背景在文本下呈现。

Goodnickoff answered 2019-10-09T12:03:05Z
0 votes

线条粗细由字体(字体,大小等)决定。 CSS中没有更改此[http://www.w3.org/TR/REC-CSS1/#text-decoration]的条款

Bradley Mountford answered 2019-10-09T12:03:33Z
0 votes

这不能回答问题,但是具有相关性,因为它使用脚本解决了缺少唯一删除线的问题。 我不是一个纯粹主义者,但是我相信这是一个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>
underdog answered 2019-10-09T12:04:04Z
0 votes

我在这里找不到合适的方法,所以我用了线性渐变和ex CSS长度单位的背景图片。

不幸的是,这意味着使用不同的字体会在不同的位置显示删除线(如果字体的x高度不同)。

<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>
<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 answered 2019-10-09T12:04:48Z
translate from https://stackoverflow.com:/questions/2539207/how-to-change-the-strike-out-line-through-thickness-in-css