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>