如何更改 CSS 中的删除线/线条粗细?
Posted
技术标签:
【中文标题】如何更改 CSS 中的删除线/线条粗细?【英文标题】:How to change the strike-out / line-through thickness in CSS? 【发布时间】:2011-02-02 02:39:24 【问题描述】:我在 CSS 中使用 text-decoration: line-through
,但我似乎找不到任何方法来改变线条粗细,而无需像 <hr>
或图像叠加这样的不雅技巧。
有没有什么优雅的方法来指定线条的粗细?
【问题讨论】:
您可以检查transparent strikethrought on text 是否有对文本的透明删除效果。 【参考方案1】:现代解决方案是使用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>
或者甚至使三振出局成为渐变!只需将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()
。
主要的缺点是这只适用于单行文本。但是,嘿,你拿走你能得到的;-)
【讨论】:
不错!但是有什么方法可以让它在多行上工作?谢谢! @user2335065: 嗯...将每一行文本换成div
,然后使用.strikeout div::after
?当然,如果文本(和/或线条的宽度)是动态的,这将不起作用......
此解决方案在单行文本上完美运行
对于 IE8,如果我不使用 calc(),我应该为 margin-top 设置什么值?
适用于我的情况,但是,我需要删除 font-size: 4em;行高:1em;.【参考方案2】:
这似乎是一个长期存在的问题,对于多行删除线没有理想的解决方案。
使用 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%);
之类的东西(默认情况下,单位是相对于元素高度的)。
很好的解决方案。
在 del 元素的文本下方显示【参考方案3】:
简短的回答:不。它取决于字体,下划线的粗细是一样的——它随着文本的粗细而变化
【讨论】:
【参考方案4】:这几天超级简单,使用下面的 CSS
text-decoration-thickness: 1px;
您可以根据需要调整厚度。
可以这样改变颜色
text-decoration-color: red;
主流浏览器支持
【讨论】:
【参考方案5】:我有一个想法,但它需要为每个厚度级别添加一个额外的元素。
<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,然后设置<strike>
或<del>
的样式,看看是否可以在不移动文本的情况下垂直轻推它。
html
<span><strike>test test</strike></span>
css
span text-decoration:line-through;color:red
strike position:relative;top:1px
两者在这里都可以正常工作,但请记住使用过渡文档类型,因为 <strike>
已被弃用。
【讨论】:
不要使用strike
,而是使用text-decoration: line-through
。
是的,我读过。我了解您的解决方案具有两个级别的元素。但是您应该使用 css 将内部 strike
更改为另一个 span
。您是否有某些原因必须使用strike
?
@ariel 如果您使用 2 个跨度,则必须使用类或 ID 来匹配它们。只是更方便。
您可以使用css子选择器。 span>span ..
touché :) 但也许你应该更新答案,因为今天的人们仍然想这样做。【参考方案6】:
我找到了另一种处理多行文本的方法:
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 高度)。它也独立于字体大小。
只有一个缺点 - 背景呈现在文本下方。
【讨论】:
【参考方案7】:没有。
但是,如果删除线颜色与文本颜色相同,您可以轻松地在背景中使用自定义图像。
如果您需要不同的颜色,那么覆盖自定义删除线图像是唯一的方法。
【讨论】:
我发现这适用于不同的颜色:***.com/questions/1107551/… 唯一的障碍是厚度。我也找不到任何简单的解决方案……也许这不值得追求。【参考方案8】:线条粗细由字体(系列、大小等)决定。 CSS 中没有规定可以更改此http://www.w3.org/TR/REC-CSS1/#text-decoration
【讨论】:
【参考方案9】:我意识到这是旧的,但有一种方法可以使用嵌套跨度标签:
<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。
【讨论】:
【参考方案10】:这并不能回答问题,但相关之处在于它解决了缺少使用脚本的独特删除线的问题。我不是一个纯粹主义者,但我相信这是一个 x-browser 解决方案。
<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>
【讨论】:
【参考方案11】:我在这里找不到合适的方法,所以我使用了 带有linear-gradient 和ex CSS length units 的背景图像。
不幸的是,这意味着使用不同的字体会在稍微不同的位置呈现删除线(例如,如果字体具有不同的 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>
【讨论】:
以上是关于如何更改 CSS 中的删除线/线条粗细?的主要内容,如果未能解决你的问题,请参考以下文章