DIV CSS文字字体删除线贯穿线中穿线怎么添加？

2013-08-07 10:53:46 对文字添加删除线方法有两种，一种是使用html删除线标签 s ；另外一种是使用css删除线样式text-decoration:line-through 。css5分别通过实例实现对文字设置删除线贯穿线样式。

DIV CSS文字删除线怎么添加，如何给文字字体添加删除线贯穿线样式？

对文字添加删除线方法有两种，一种是使用html删除线标签<s>；另外一种是使用css删除线样式text-decoration:line-through 。

常见删除线效果应用截图

接下来我们分别使用html s删除线标签实现文字删除线效果和使用div css删除线样式text-decoration实现对文字删除线贯穿线样式设置。

一、html标签实现删除线样式

1、使用标签

<s>我被加删除线</s>

2、实例代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>删除线实例 在线演示 yfnd.net</title> 
</head> 
<body> 
我被加<s>删除线</s>！ 
</body> 
</html>

3、html实例效果截图

使用html标签实现删除线效果截图

二、css删除线样式实现删除线效果

1、使用css实现删除线样式属性单词
text-decoration:line-through

2、div css实现删除线完整html源代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>删除线实例 在线演示 yfnd.net</title> 
<style> 
.HTML8{ text-decoration:line-through} 
/* css注释说明：设置.HTML8对象删除线样式 */ 
</style> 
</head> 
<body> 
<p>css样式实现删除线效果如下：</p> 
<p>原价格为：<span class="HTML8">700</span>￥<br> 
现价格：500￥</p> 
</body> 
</html>

3、css删除线-css贯穿线案例截图

Css实现删除线效果截图

以上两个案例HTML8分别使用了html标签方法和使用CSS样式方法实现对文字字体设置删除线（贯穿线）样式效果。平时大家实际CSS DIV布局时候根据需求选择删除线贯穿线实现方法。

扩展相关阅读：
1、css下划线
2、css上划线

HTML标签和CSS实现贯穿线删除线在线演示：查看案例

两个实例打包下载：

立即下载（0.994KB）

DIV CSS文字字体删除线 贯穿线 中穿线怎么添加？

一、html标签实现删除线样式

二、css删除线样式实现删除线效果

DIV CSS文字字体删除线贯穿线中穿线怎么添加？