在逛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