当前位置：文江博客话题详情

如何改变CSS中的删除线/穿线粗细？

发布于 2024-08-27 08:16:00 字数 155 浏览 13 评论 0原文

我在 CSS 中使用 text-decoration: line-through ，但我似乎找不到任何方法来改变线条粗细，而无需像

这样的不优雅的黑客手段。代码> 或图像覆盖。

有没有优雅的方法来指定穿线的粗细？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

故事灯 2024-09-03 08:16:00

现代解决方案是使用 text-decoration-thickness< /a> 属性。

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>

或者甚至使三振成为渐变！只需使用背景与高度组合来代替边框：

.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()。

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

The modern solution is to use the text-decoration-thickness property.

text-decoration-thickness: 1px;

You can also change the color using the text-decoration-color property.

text-decoration-color: #ff0000aa;

For older browsers, you can use one of these workarounds:

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:

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

.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 background combined with a height, in place of 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 :after syntax and manually write the negative margin-top value instead of using calc().

The main downside is that this only works on a single line of text. But hey, you take what you can get ;-)

回复收藏 0 原文

葵雨 2024-09-03 08:16:00

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

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

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

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

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:

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

回复收藏 0 原文

哽咽笑 2024-09-03 08:16:00

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

回复收藏 0 原文

李白 2024-09-03 08:16:00

如今这非常简单，使用以下 CSS

text-decoration-thickness: 1px;

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

可以像这样改变颜色

text-decoration-color: red;

主要浏览器支持

This is super easy these days, Use the following CSS

text-decoration-thickness: 1px;

You can adjust the thickness according to your needs.

Can change the color like this

text-decoration-color: red;

Supported by main browsers

回复收藏 0 原文

夜吻♂芭芘 2024-09-03 08:16:00

我有一个想法，但需要为每个厚度级别添加一个额外的元素。

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。
当您尝试精确定位时，您也可以在负顶部使用像素单位。

还有另一种选择，首先使用 text-decoration，然后使用 ~~或样式，看看是否可以微移垂直放置而不移动文本。~~

html

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

css

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

两者都在这里工作正常，但请记住使用过渡文档类型，因为 ~~已被弃用。~~

I have an idea but it would require adding an additional element for each level of thickness.

html

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

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.

There is another alternative which involve using first text-decoration and then style <strike> or <del> and see if you can nudge it vertically without moving the text with it.

html

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

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.

回复收藏 0 原文

长伴 2024-09-03 08:16:00

我找到了另一种多行文本方法：

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 高度）。它的工作方式也与字体大小无关。

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

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/

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

Only one disadvantage - background renders under the text.

回复收藏 0 原文

一束光，穿透我孤独的魂 2024-09-03 08:16:00

不会。

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

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

回复收藏 0 原文

脸赞 2024-09-03 08:16:00

线条粗细由字体（系列、大小等）决定。 CSS 中没有规定可以更改此 http://www.w3。 org/TR/REC-CSS1/#text-decoration

回复收藏 0 原文

吃颗糖壮壮胆 2024-09-03 08:16:00

我意识到这已经很旧了，但是有一种方法可以使用嵌套跨度标签来做到这一点：

<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< /strike>/FF，但不适用于 Safari、IE10 或 Opera。适用于 Mac 上的 Chrome，但不适用于 Windows。~~

I realize this is old, but there is a way to do it using nested span tags:

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

Works in ~~Chrome~~/FF, but not Safari, IE10 or Opera. Works on Chrome on Mac, but not Windows.

回复收藏 0 原文

小嗲 2024-09-03 08:16:00

这并没有回答问题，但相关的是它解决了使用脚本缺乏独特的删除线的问题。我不是纯粹主义者，但我相信这是一个 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>

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.

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

回复收藏 0 原文

余生共白头 2024-09-03 08:16:00

我在这里找不到合适的方法，所以我使用了
带有线性渐变和 < 的背景图像a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#Units" rel="nofollow noreferrer">ex 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>

I couldn't find an appropriate method here so I used
background-image with a linear-gradient and ex CSS length units.

Unfortunately this means that using different font faces will render the strikethrough in a slightly different position (if the fonts have different x-heights for example).

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

回复收藏 0 原文

~没有更多了~