一年一度的双十一剁手节快到了，大家在逛淘宝时一定会关注商品的价格，你有没有注意到商品原价上面加了删除线，作为一个前端开发人员，你知道如何用css给文字加删除线吗？这篇文章给大家总结了添加删除线的三种方法，包括html中的删除线标签和css中的删除线样式，有一定的参考价值，感兴趣的朋友可以看看。
给文字添加删除线有三种方法，一种是CSS中的text-decoration样式，一种是标签，最后一种是标签。
方法1：用CSS中text-decoration设置删除线样式
实例描述：在标签中设置需要删除的商品价格，给标签一个类名p，给其添加CSS样式text-decoration: line-through，就可以实现了，具体代码如下：
.p{text-decoration: line-through;} 深层补水面膜30片原价¥399
立即学习“前端免费学习笔记（深入）”；
双十一面膜30片¥299
效果图：
方法2：用html中的删除标签
实例描述：直接用html中的标签，即可给文字添加删除线，具体代码如下：
这个商品原价999现价499
效果如图所示：
方法3：用html中的删除标签
实例描述：标签和标签一样，都可以给文字添加删除线，使用简单方便，具体代码如下：
电视机原价
¥4000电视剧现价¥2999
效果如图所示：
总结：给文字添加删除线有三种方法，分别是html中的标签、标签以及CSS中的text-decoration：line-through样式。直接用html标签比较方便，至于选择哪种方法，还要看个人习惯和工作需要，希望这篇文章对你有所帮助！
【相关教程推荐】
1. HTML教程
2. CSS3教程
3. bootstrap教程
以上就是html和CSS给文字添加删除线的三种方法（图文）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1547300.html
微信扫一扫 
支付宝扫一扫 
