超過寬度顯示省略符號(CSS版)

    在逛hemin的部落格的時候看到了一道面試題，關於超過寬度顯示省略符號的效果，自己在網上查查，發現了這個CSS版本。當然還有JS版的解決方案，而且簡單，不過這個的思路很精妙，值得收藏！
    基本原理是：當容器內的常值內容超過容器寬度時，文本將會換行，這時給容器一個overflow:hidden屬性，換行部分將不會顯示。OK！接下來是最精彩的部分。請看代碼：

代碼
.list ul { 
font-size:12px;
font-family:simsun;
text-align:left;
line-height:18px;
width:11em;
background:#fff;
}
.list li{
height:18px;
overflow:hidden; //當a被撐開時只顯示上半部分
position:relative;
padding-left:1em;
background:url(...) no-repeat 3px 6px;
}
.list a{
display:block;
padding-right:1em;  //為了容納span
background:url(...) right top no-repeat;
position:relative;
zoom:1;
word-break:break-all;//漢字字母數字
}
.list a span {
position:absolute; //span浮動，
right:0em;
bottom:0;  //span緊貼下邊界
height:18px;
width:1em;
background:#fff; //背景色與a一致，遮擋span
overflow:hidden;
}
 
可能光看代碼還是不清楚，再來看看：
 
我相信再是很清楚了。
很巧妙的想法，讓人回味！
此方法出處：http://bbs.blueidea.com/thread-2915238-1-1.html