CSS文字截取功能實現程式碼
- WBOY原創
- 2016-05-16 12:05:231872瀏覽
本章介紹用css來實現自動截取文字，不需要後台程式和js的使用。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
好處是：
相容ie，firefox，opera;
有利於內容完整性;有利於seo;
無需後台程式處理;
可以在前台隨時調整要截取的長度。
不好的地方：
不能自動判斷截取長度，當字元很短的時候在firefox中也會產生後面的省略符號。
另外在設定截取寬度的時候，要注意，盡量讓文字截取完整。
程式碼實例:
<!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來實現自動截取文字效果的全部程式碼，大家可以自己動手試試。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn