超过宽度显示省略号(CSS版)

在逛hemin的博客的时候看到了一道面试题，关于超过宽度显示省略号的效果，自己在网上查查，发现了这个CSS版本。当然还有JS版的解决方案，而且简单，不过这个的思路很精妙，值得收藏！
基本原理是：当容器内的文本内容超过容器宽度时，文本将会换行，这时给容器一个overflow:hidden属性，换行部分将不会显示。OK！接下来是最精彩的部分。请看代码：

代码[code].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;
}

[/code]
可能光看代码还是不清楚，再来看看示意图：




我相信再是很清楚了。
很巧妙的想法，让人回味！
此方法出处：http://bbs.blueidea.com/thread-2915238-1-1.html