"- CSS 边框方式:
.text-line-through {
text-decoration: line-through;
}
- CSS 伪元素方式:
.text-line-through::after {
content: \"\";
position: absolute;
bottom: 50%;
left: 0;
right: 0;
border-top: 1px solid;
}
- CSS 线性渐变方式:
.text-line-through {
background-image: linear-gradient(to right, transparent 50%, black 50%);
background-size: 200% 100%;
background-position: right bottom;
background-repeat: no-repeat;
}
- JavaScript 方式:
<span id=\"text\">Hello, world!</span>
<script>
var text = document.getElementById(\"text\");
text.style.textDecoration = \"line-through\";
</script>
- SVG 方式:
<svg width=\"100\" height=\"100\" xmlns=\"http://www.w3.org/2000/svg\">
<line x1=\"0\" y1=\"50%\" x2=\"100%\" y2=\"50%\" stroke=\"black\" />
</svg>
- Canvas 方式:
<canvas id=\"canvas\" width=\"100\" height=\"100\"></canvas>
<script>
var canvas = document.getElementById(\"canvas\");
var ctx = canvas.getContext(\"2d\");
ctx.moveTo(0, 50);
ctx.lineTo(100, 50);
ctx.stroke();
</script>
- HTML
<del>标签方式:
<del>Hello, world!</del>
这些是实现文字贯穿线的常用方法,可以根据具体的需求和场景选择合适的方式来实现。"