CSS文字截取功能实现代码-css教程-PHP中文网

CSS文字截取功能实现代码

php中文网

发布： 2016-05-16 12:05:23

原创

2905人浏览过

本章给大家介绍用css来实现自动截取文字，不需要后台程序和js的使用。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

好处是：
兼容IE，firefox，Opera;
有利于内容完整性;有利于SEO;
无需后台程序处理;
可以在前台随时调节要截取的长度。

不好的地方：
不能自动判断截取长度，当字符很短的时候在Firefox中也会生成后面的省略符号。

另外在设置截取宽度的时候，要注意，尽量让文字截取完整。

代码实例:

weenCompany闻名企业网站系统5.3.0 繁体中英文 UTF8

weenCompany闻名企业网站系统(免费开源)是一个功能强大, 使用简单的中英文企业智能建站系统, 您只需要一些基本的计算机知识就可以利用此系统完成中小型企业网站的建设; 是低成本企业网站架设方案之首选CMS系统, 也适合建设个人网站。weenCompany闻名企业网站系统功能：1. 程序代码简洁严谨, 整个系统程序仅2M左右大小.2. 中英文双语版共用一套网站程序, 双语页面实现自由切换.3

查看详情

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html>   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<title>css文字截取</title>   
<style type="text/css">   
body{font-size:13px;color:#8c966b;}    
p{clear:both;width:340px;border:1px solid #333;margin:3px;padding:3px;}    
p a{color:#8c966b;text-decoration:none;}    
p a:hover{text-decoration:underline;}    
p a{display:block;width:310px;white-space:nowrap;overflow:hidden;float:left;    
    -o-text-overflow: ellipsis;    /* for Opera */    
    text-overflow:ellipsis;        /* for IE */    
}    
p:after{content:"...";padding-left:3px;font-size:12px;}/* for Firefox */    
</style>   
</head>   
<body>
用css来实现自动截取文字，不需要后台程序和JS的使用 
好处是：有利于内容完整性，有利于SEO，无需后台程序处理，可以在前台随时调节要截取的长度。 
<div><a href="#">不好的地方：不能自动判断截取长度，当字符很短的时候在Firefox中也会生成后面的省略符号。</a></div>   
<div><a href="#">另外在设置截取宽度的时候，要注意，尽量让文字截取完整</a></div>   
</body>   
</html>

登录后复制

以上就是用纯css来实现自动截取文字效果的全部代码，大家可以自己动手试试。