改变删除线的垂直位置？

Question

改变删除线的垂直位置？

23

我正在使用删除线标签：

<s>$5,000,000</s>

但是这条线太低了...它离底部大约1/4的位置，而不是通过中间。有没有办法修改它，使其更加接近中间一些？

- jeffkee

5

“strike”已经被弃用，在CSS中可以使用“text-decoration:line-through;”。 - Simon Fox

3

在一个HTML5文档中，对于这个已经改变了的价格，使用s标签是完全合适的，比起行内样式如<span style="text-decoration: line-through;">更加有用。虽然strike标签已经被弃用了。 - Rory O'Kane

帮助我的答案：https://dev59.com/LHE85IYBdhLWcg3w8IQ4 - Hebe

7个回答

9

使用删除线标签或text-decoration:line-through样式是不行的。删除线位置是内置的。你可以自己编写样式，但这将是一件非常麻烦的事情。

- Robusto

谢谢您的澄清。我在互联网上找不到有关控制位置的任何信息...现在我知道原因了！ - jeffkee

4

十一年后，这是一个非常简单的任务:

s{
  text-decoration: none;
    position: relative;
}

s::before{
    content: '';
    width: 100%;
    position: absolute;
    right: 0;
    top: calc( 50% - 1.5px );
    border-bottom: 3px solid rgba(255,0,0,0.8);
}

old price: <s>$99.95</s>

- Oleg Korzhukov

2

不，使用删除线标签无法实现这个效果。这是浏览器的渲染引擎的一部分。在我的Chrome浏览器中，该行文本呈现在中间上方。

- Tesserex

2

2021解决方案

通常，你可以使用 text-decoration: line-through，但是目前无法改变line-through线的位置。

但幸运的是，你可以通过新的CSS属性 text-underline-offset 来改变下划线的位置。

以下是它的工作原理：

.strike {
  text-decoration: underline;
  text-underline-offset: -.4em;
}

<p>Only <span class="strike">$199.99</span> $99.99!</p>

虽然你可能会注意到这条线看起来有点不连贯。这是因为相对较新的text-decoration-skip-ink试图隐藏在会覆盖文本的地方的下划线。它非常适合用于下划线，但作为删除线则失败了。

幸运的是，我们可以关闭这个功能，并结合一些额外的漂亮颜色和粗细属性，这就是最终的结果。

.strike {
  text-decoration: underline;
  text-underline-offset: -.4em;
  text-decoration-skip-ink: none;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
  color: gray;
}

<p>Only <span class="strike">$199.99</span> $99.99!</p>

浏览器的支持非常广泛，目前只有Safari是个例外。

- pbarney

1

这个解决方案允许填充，并使用css的line-through属性。它适用于Firefox，而Chrome / Safari无论如何都可以正常工作。

div.hbPrice span.linethroughOuter {
    padding: 0 10px 0 0;
    text-decoration: line-through;
    position: relative;
}
div.hbPrice span.linethroughInner {
    position: relative;
}
/* Firefox only. 1+ */
div.hbPrice span.linethroughOuter,  x:-moz-any-link  { bottom:  2px; }
div.hbPrice span.linethroughInner,  x:-moz-any-link  { top:  2px; }

而且标记类似于...

<div class="hbPrice"><span class="linethroughOuter"><span class="linethroughInner">£1,998</span></span> £999</div>

另一种解决方案是添加一条线的背景图像，并将其颜色与文本相同。

- Delazi

0

你可以像这样做：

<div class="heading"><span>Test heading</span></div>

.heading {
  position: relative;
  text-align:center;
}
.heading:before {
  background-color: #000000;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 50%;
}
.heading span {
  background-color: #fff;
  display: inline-block;
  padding: 0 2px;
  position: relative;
  text-align: center;
}

http://codepen.io/anon/pen/cLBls

- John Magnolia

有趣，但与问题无关。 - Krisztián Balla

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Keith Adler · Accepted Answer

我编写了这段代码，可以让您完全控制删除线的位置和样式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Test</title>

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<style type="text/css"> 

    .mark {
        border-bottom: 1px solid #000;
        top: -9px; /* Tweak this and the other top in equal, but opposite values */
        position: relative;
    }
    .offsetMark {
        position: relative;
        top: 9px; /* Tweak this and the other top in equal, but opposite values */
    }   

</style>     
</head>     
<body>        
<div>     
    <p class="strikethrough">This is an <span class="mark"><span class="offsetMark">example</span></span> of how I'd do it.</p>     
</div>

</body>
</html>