HTML中字体删除线的效果怎样做，方法是什么？

HTML中字体删除线的效果怎样做?字体删除线的效果也就是字体横向中间带有横向，可以用于一些要删除但又看用户看到的内容，例如产品的原价场景应用，小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

本教程操作环境：windows7系统、CSS3& & HTML5版、Dell G3电脑。

html添加字体删除线

1、用“s> ”标签

!DOCTYPE html>
    
html>
    
	head>
    
		meta charset="utf-8">
    
	/head>
    

	body>
    
		正常文本br />
    br />
    
		s>
    删除线文本/s>
    
	/body>
    
/html>
    

2、用“del> ”标签

!DOCTYPE html>
    
html>
    
	head>
    
		meta charset="utf-8">
    
	/head>
    

	body>
    
		正常文本br />
    br />
    
		del>
    删除线文本/del>
    
	/body>
    
/html>
    

3、给文本元素添加“text-decoration:line-through; ”样式

!DOCTYPE html>
    
html>
    
	head>
    
		meta charset="utf-8">
    
	/head>
    

	body>
    
		正常文本br />
    br />
    
		span style="text-decoration: line-through;
    ">
    删除线文本/span>
    
	/body>
    
/html>
    

text-decoration 属性规定添加到文本的修饰（下划线、上划线、删除线等）；当属性值设置为“line-through”时即可定义穿过文本下的一条线。

关于HTML中字体删除线的效果的实现就介绍到这，上述示例具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多大家可以关注网络其它的相关文章。

文本转载自PHP中文网

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！