文字超过宽度显示省略号（无js全兼容）
先上代码，大家可以复制看效果
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>无hack无js全兼容text-overflow-ellipsis效果</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 </head> 7 <style> 8 * { margin:0; padding:0;} 9 body { background:#fff;} 10 .list ul { font-size:12px; font-family:simsun; text-align:left; line-height:18px;} 11 .list a { color:#000; text-decoration:none; word-break:break-all;} 12 .list div { position:relative; zoom:1; padding-left:1em; background:url(http://img.jb51.net/images/ico.gif) no-repeat 3px 6px;} 13 .list span { position:absolute; right:-10px; bottom:0; height:18px; width:10px; background:#fff; overflow:hidden;} 14 .list li { position:relative; width:11em; background:url(http://img.jb51.net/images/pot.gif) right top no-repeat; height:18px; overflow:hidden; padding-right:10px; zoom:1;} 15 .list a:hover { color:#f60;} 16 </style> 17 <body> 18 <div class="list"> 19 <ul> 20 <li> 21 <div> 22 <a href="#nogo">该标签中字符超过十个了</a> 23 <span></span> 24 </div> 25 </li> 26 <li> 27 <div> 28 <a href="#nogo">只有六个汉字</a> 29 <span></span> 30 </div> 31 </li> 32 <li> 33 <div> 34 <a href="#nogo">该标签中字符超过三十个了该标签中字符超过三十个了该标签中字符超过三十个了该标签中字符超过三十个了</a> 35 <span></span> 36 </div> 37 </li> 38 <li> 39 <div> 40 <a href="#nogo">blueidea blueidea blueidea</a> 41 <span></span> 42 </div> 43 </li> 44 </ul> 45 </div> 46 </body> 47 </html>
思路：
我们要达到的效果是：当“字符超过额定宽度”，则“显示三个小点”。
=> 当“字符超过额定宽度”，对于页面来说可能发生的一个改变就是：换行！
=> 换行将导致该范围的底线降低。
=> 那么，我们的目的则可以换算成：该范围的底线降低时显示三个小点。
英文句子和连续字母/数字测试效果在非IE下欠佳（因为不自动换行），可以配合js来完善。
以下是优化过的版本
此次修改主要的优化方面如下：
1. 去掉了div标签，结构更加紧凑。
2. 将宽度范围的设定移至外框，具有更强的可移植性，内部结构可以更自由调整。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>无hack无js全兼容text-overflow-ellipsis效果</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <style type="text/css"> 7 * { margin:0; padding:0;} 8 .list ul { 9 font-size:12px; 10 font-family:simsun; 11 text-align:left; 12 line-height:18px; 13 width:11em; 14 background:#fff; 15 } 16 .list li{ 17 height:18px; 18 overflow:hidden; 19 position:relative; 20 padding-left:1em; 21 background:url(http://img.jb51.net/images/ico.gif) no-repeat 3px 6px; 22 } 23 .list a{ 24 display:block; 25 padding-right:1em; 26 background:url(http://img.jb51.net/images/pot.gif) right top no-repeat; 27 position:relative; 28 zoom:1; 29 word-break:break-all; 30 } 31 .list a span { 32 position:absolute; 33 right:0em; 34 bottom:0; 35 height:18px; 36 width:1em; 37 background:#fff; 38 overflow:hidden; 39 } 40 </style> 41 </head> 42 <body> 43 <div class="list"> 44 <ul> 45 <li><a href="#nogo">该标签中字符超过十个了<span></span></a></li> 46 <li><a href="#nogo">只有六个汉字<span></span></a></li> 47 <li><a href="#nogo">该标签中字符超过三十个了该标签中字符超过三十个了该标签中字符超过三十个了该标签中字符超过三十个了<span></span></a></li> 48 <li><a href="#nogo">blueidea blueidea blueidea<span></span></a></li> 49 </ul> 50 </div> 51 </body> 52 </html>
原理图
