80

我正在使用text-decoration: line-throughin CSS，但我似乎无法找到任何方法来改变线条粗细，而不会出现不雅的黑客攻击<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>

或者甚至使三振出局成为渐变！只需使用 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>

这适用于 IE9（无渐变）及更高版本 - 甚至 IE8，如果您使用单冒号:after语法并手动写入负值margin-top而不是使用calc().

主要缺点是这只适用于单行文本。但是，嘿，你拿走你能得到的;-)

于 2013-05-07T02:23:32.833 回答
26

这似乎是一个长期存在的问题，没有多线删除线的理想解决方案。

方便地，使用 CSS 渐变，您可以轻松地调整线条粗细，如下所示：

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

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

于 2014-04-10T11:05:25.733 回答
9

简短的回答：不。它取决于字体，下划线的粗细是一样的——它随着文本的粗细而变化

于 2010-03-29T15:41:10.013 回答
5

这几天超级简单，使用下面的 CSS

text-decoration-thickness: 1px;

您可以根据需要调整厚度。

可以这样改变颜色

text-decoration-color: red;

主流浏览器支持

在此处输入图像描述

于 2021-01-09T09:34:57.313 回答
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}

顺便说一句，第二个跨度中的空格是特殊的 - 您必须使用 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>已弃用。

于 2010-03-30T05:35:29.713 回答
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 回答
1

我意识到这很旧，但是有一种方法可以使用嵌套的 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。

于 2015-01-08T03:24:06.083 回答
1

不。

但是，如果删除线颜色与文本颜色相同，您可以轻松地在背景中使用自定义图像。

如果您需要不同的颜色，那么覆盖自定义删除线图像是唯一的方法。

于 2010-03-29T15:41:04.037 回答
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

我在这里找不到合适的方法，所以我使用了带有线性渐变的背景图像和前CSS 长度单位。

不幸的是，这意味着使用不同的字体会在稍微不同的位置呈现删除线（例如，如果字体具有不同的 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 回答