CSS超出文本用省略號顯示 兼容firefox IE6 IE7
第一種方法：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>css設置文字隱藏</title> 6 <style type="text/css"> 7 .css1{ 8 color:#6699ff; 9 border:1px #ff8000 dashed; 10 margin-bottom:20px; 11 width: 20em;/*不允許出現半漢字截斷*/ 12 } 13 .css{ 14 overflow: hidden; /*自動隱藏文字*/ 15 text-overflow: ellipsis;/*文字隱藏后添加省略號*/ 16 white-space: nowrap;/*強制不換行*/ 17 width: 20em;/*不允許出現半漢字截斷*/ 18 color:#6699ff; 19 border:1px #ff8000 dashed; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="css1">Web前端開發 – 專注於網站前端設計與Web用戶體驗</div> 25 <div class="css">Web前端開發 – 專注於網站前端設計與Web用戶體驗</div> 26 </body> 27 </html>
第二種方法:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>css寫省略號方法</title> 6 <style> 7 ul{ 8 width: 300px; /*UL 的寬度*/ 9 margin: 40px auto; 10 padding: 12px 4px 12px 24px; 11 border: 1px solid #D4D4D4; 12 background: #F1F1F1; 13 list-style:none; 14 } 15 li{ 16 margin: 12px 0; 17 } 18 19 li a{ 20 display: block; 21 width: 220px; /* li 的寬度 這個控制顯示多少字后顯示...設的寬度大於字數時， 是不會顯示...的 */ 22 overflow: hidden; /*自動隱藏文字*/ 23 white-space: nowrap; /*強制不換行*/ 24 -o-text-overflow: ellipsis; 25 text-overflow: ellipsis; /*當對象文本溢出時顯示...*/ 26 /* text-overflow:clip;*/ /*當對象文本溢出時直接裁剪掉，會出現半漢字截斷*/ 27 } 28 li:not(p){ 29 clear: both; 30 } 31 li:not(p) a{ 32 max-width: 190px; /*只有FF識別*/ 33 float: left; 34 } 35 36 li:not(p):after{ 37 content: "..."; /*頁面的后綴省略號*/ 38 float: left; /*在每一行中向右浮動*/ 39 width: 25px; 40 padding-left: 5px; 41 color: #000; 42 } 43 </style> 44 </head> 45 46 <body> 47 <ul> 48 <li><a href="#">是以奔馳、寶馬、奧迪、保時捷為主的高端</a></li> 49 <li><a href="#">是以奔馳、寶馬、奧迪、保時捷為主的高端</a></li> 50 <li><a href="#">是以奔馳、寶馬、奧迪、保時捷為主的高端</a></li> 51 <li><a href="#">是以奔馳、寶馬、奧迪、保時捷為主的高端</a></li> 52 <li><a href="#">是以奔馳、寶馬、奧迪、保時捷為主的高端</a></li> 53 <li><a href="#">是以奔馳、寶馬、奧迪、保時捷為主的高端</a></li> 54 <li><a href="#">是以奔馳、寶馬、奧迪、保時捷為主的高端</a></li> 55 </ul> 56 </body> 57 58 </html>