我text-decoration: line-through
在CSS中使用了,但似乎没有任何办法来改变线条粗细,而不会出现乱码<hr>
或图像叠加。
是否有任何优雅的方法来指定直通线的厚度?
Answers:
这是一个纯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>
甚至使三叉戟成为渐变!只需将与background
组合使用height
,以代替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()
。
主要缺点是,这仅适用于一行文本。但是,嘿,您会尽力而为;-)
div
,然后使用.strikeout div::after
?当然,如果文本(和/或线条的宽度)是动态的,那将行不通...
如果没有针对多行删除线的理想解决方案,这似乎是一个长期存在的问题。
方便地,使用CSS渐变,您可以像这样轻松地调整线条粗细:
strike {
text-decoration: none;
background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
}
在此处查看演示和完整的供应商前缀:http : //codepen.io/pearlchen/pen/dhpxu
background-image: linear-gradient(transparent 45%, #cc1f1f 45% 55%, transparent 55%);
(默认情况下,单位是相对于元素高度的)。
我有一个主意,但需要为每个厚度级别添加一个附加元素。
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>
已弃用。
strike
use text-decoration: line-through
。
strike
为另一个span
。有什么原因必须使用strike
?
span>span { .. }
我发现了多行文本的另一种方法:
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)。它也可以独立于字体大小工作。
只有一个缺点-背景在文本下呈现。
没有。
但是,如果删除线颜色与文本颜色相同,则可以在背景中使用自定义图像轻松地摆脱困境。
如果需要不同的颜色,则叠加自定义删除线图像是唯一的方法。
我意识到这已经很老了,但是有一种使用嵌套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上不行。
线的粗细由字体(字体,大小等)决定。CSS中没有更改此http://www.w3.org/TR/REC-CSS1/#text-decoration的条款
这不能回答问题,但是具有相关性,因为它使用脚本解决了缺少唯一删除线的问题。我不是一个纯粹主义者,但是我相信这是一个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>
我在这里找不到合适的方法,因此我使用具有线性渐变和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>