一年一度的双十一剁手节快到了，大家在逛淘宝时一定会关注商品的价格，你有没有注意到商品原价上面加了删除线，作为一个前端开发人员，你知道如何用css给文字加删除线吗？这篇文章给大家总结了添加删除线的三种方法，包括html中的删除线标签和css中的删除线样式，有一定的参考价值，感兴趣的朋友可以看看。
给文字添加删除线有三种方法，一种是CSS中的text-decoration样式，一种是标签，最后一种是标签。
方法1：用CSS中text-decoration设置删除线样式
实例描述：在标签中设置需要删除的商品价格，给标签一个类名p，给其添加CSS样式text-decoration: line-through，就可以实现了，具体代码如下：
深层补水面膜30片原价¥399
立即学习“前端免费学习笔记（深入）”；
双十一面膜30片¥299
效果图：
方法2：用html中的删除标签
实例描述：直接用html中的标签，即可给文字添加删除线，具体代码如下：
这个商品原价999现价499
效果如图所示：
v3.0修正版更新：新增加的功能：1、网店logo在线上传。2、添加图片上传预览功能。3、增加ICP备案字段，在线添加。4、添加管理员管理功能。5、添加送货详细设置功能。6、增加客户端验证功能。7、增加5种样式。修正的地方：1、订单不能删除。2、产品图片不能删除。3、管理员不能修改密码。4、小数显示不正常，比如0.68显示为.685、退出不方便。6、前台热门商品文字显示不换行。7、商品详细介绍页面
方法3：用html中的删除标签
实例描述：标签和标签一样，都可以给文字添加删除线，使用简单方便，具体代码如下：
电视机原价
¥4000电视剧现价¥2999
效果如图所示：
总结：给文字添加删除线有三种方法，分别是html中的标签、标签以及CSS中的text-decoration：line-through样式。直接用html标签比较方便，至于选择哪种方法，还要看个人习惯和工作需要，希望这篇文章对你有所帮助！
【相关教程推荐】
1. HTML教程
2. CSS3教程
3. bootstrap教程
