Html 如何在CSS中通过厚度更改划线/线条？
我在CSS中使用了Html 如何在CSS中通过厚度更改划线/线条？,html,css,strikethrough,Html,Css,Strikethrough,我在CSS中使用了文本装饰：线条通过，但我似乎找不到任何方法来改变线条的粗细，而没有像或图像叠加这样不雅观的技巧 有没有什么优雅的方法来指定线的厚度？没有 但是，如果穿透颜色与文本颜色相同，则可以轻松地在背景中使用自定义图像 如果您需要不同的颜色，那么覆盖自定义的划线图像是唯一的方法。简短回答：否。这取决于字体，下划线的厚度是相同的，它随文本的厚度而变化。线条的厚度由字体（系列、大小等）决定。CSS中没有关于更改此属性的规定我有一个想法，但它需要为每个厚度级别添加额外的元素 html 顺便说一句
文本装饰：线条通过，但我似乎找不到任何方法来改变线条的粗细，而没有像
或图像叠加这样不雅观的技巧
有没有什么优雅的方法来指定线的厚度？没有
但是，如果穿透颜色与文本颜色相同，则可以轻松地在背景中使用自定义图像
如果您需要不同的颜色，那么覆盖自定义的划线图像是唯一的方法。简短回答：否。这取决于字体，下划线的厚度是相同的，它随文本的厚度而变化。线条的厚度由字体（系列、大小等）决定。CSS中没有关于更改此属性的规定我有一个想法，但它需要为每个厚度级别添加额外的元素
html
顺便说一句，第二个跨距中的空格是特殊空格-您必须使用alt+0160或alt+255。
当您尝试精确定位时，也可以在负片顶部使用像素单位
还有另一种选择，即先使用文本装饰，然后使用样式
或
，然后查看是否可以在不移动文本的情况下垂直移动文本
html
这两种方法在这里都可以很好地工作，但请记住使用过渡doctype，因为
已被弃用。这并不能回答问题，但它通过使用脚本解决了缺少独特罢工的问题。我不是一个纯粹主义者，但我相信这是一个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>
函数do_删除（idx）
{
$（此）.wrap（“”）。
在（“”）之前。
包裹（“”）；
}
$（函数（）{
$（'删除'）。每个（不删除）；
});
一个jquery黑客通过罢工进行彩色罢工，我意识到这并不能回答您的问题，对不起，但可能对其他人有好处。
这里有一个纯CSS方法，它不需要任何不必要的包装器元素。另外，您不仅可以调整删除线的厚度，还可以单独控制其颜色和文本颜色：
。删除{
字号：4em；
线高：1米；
位置：相对位置；
}
三振{
边框底部：0.125em纯红；
内容：“；
左：0；
边缘顶部：calc（0.125em/2*-1）；
位置：绝对位置；
右：0；
最高：50%；
}
删除文本
这似乎是一个长期存在的问题，对于多行删除线没有理想的解决方案
使用CSS渐变，您可以方便地调整线条粗细，如下所示：
strike {
text-decoration: none;
background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 9px,transparent 9px);
}
请参见此处的演示和完整的供应商前缀：我意识到这很旧，但有一种方法可以使用嵌套的span标记来实现：
<span style="text-decoration: line-through; font-size: 2em;">
<span style="font-size: 0.5em; vertical-align: middle;">
Striked Text
</span>
</span>
删除的文本
删除线取决于字体的大小，因此如果将外部跨距增加一倍，将使线条的厚度增加一倍。然后，您需要将内部的一个减少一半。垂直对齐是必要的，否则该线太高，使其看起来几乎是一条上划线
在行动中：
适用于Chrome/FF，但不适用于Safari、IE10或Opera。可以在Mac上的Chrome上使用，但不能在Windows上使用。我找到了另一种多行文本的方法：
span {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII=');
background-repeat: repeat-x;
background-position: center;
}
这种方法假设重复一个图像（1px宽度和npx高度）。它也可以独立于字体大小工作
只有一个缺点-背景在文本下呈现。我在这里找不到合适的方法，所以我使用了
带有和的背景图像
不幸的是，这意味着使用不同的字体面将在稍微不同的位置渲染删除线（例如，如果字体具有不同的x高度）
.container{
宽度：300px；
}
.多行删除线{
显示：内联；
背景图像：线性渐变（透明1.1ex，红色1.1ex，红色1.3ex，透明1.3ex）；
}
.alt-1{
字体系列：无衬线；
字号：2rem；
}
.alt-2{
字体系列：无衬线；
字号：4rem；
线高1；
}
Lorem ipsum door sit amet，继续成为精英球员。无设施，无设施，无电，无电
Lorem ipsum dolor sit amet，连续三年成为精英。无设施，无设施，无电，无电
同侧线删除线删除线。无设施，无设施，无电，无电
现在这非常简单，请使用以下CSS
text-decoration-thickness: 1px;
您可以根据需要调整厚度
你能像这样改变颜色吗
text-decoration-color: red;
受主浏览器支持
我发现这适用于不同的颜色：唯一的障碍是厚度。我也找不到任何简单的解决办法。。。也许这不值得追求。与其使用罢工
不如使用文本装饰：行通过
。是的，我读过了。我理解您的解决方案有两个层次的要素。但是您应该将内部的strike
更改为另一个带有css的span
。是否有某些原因必须使用strike
？@ariel如果使用2个跨距，则必须使用类或ID来匹配它们。更方便的是，你可以使用css子选择器span>span{..}
touché：）但是也许你应该更新答案，因为今天的人们仍然希望这样做。很好！但是有什么方法可以让它在多条线路上工作吗？谢谢@user2335065:Hmm…将每行文本包装成div
，然后使用。删除div:：after
？当然，如果文本（和/或行的宽度）是动态的，这将不起作用…此解决方案在一行文本上非常有效。对于IE8，如果我不使用calc（），我应该为边距顶部设置什么值？对于我的案例，这是有效的，但是，我需要删除字体大小：4em；
<span style="text-decoration: line-through; font-size: 2em;">
<span style="font-size: 0.5em; vertical-align: middle;">
Striked Text
</span>
</span>
span {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII=');
background-repeat: repeat-x;
background-position: center;
}
text-decoration-thickness: 1px;
text-decoration-color: red;