firefox到现在还不支持text-overflow:ellipsis;
用css模拟,还有很多问题,而且也只是在ul,li标签试用了下!
firefox ie8 chrome



<style type="text/css">
* {margin: 0;padding: 0;}
body{font:100%/1.5 Arial,sans-serif;}
a {text-decoration: none;color:#06C;}
ul {list-style:none;margin:20px 50px;width:240px;}
li{
height:25px;
overflow:hidden;
width:100%;
}
li a{
float:left;
position:relative;
width:95%;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
@-moz-document url-prefix(){
li a{
white-space:normal;
overflow:visible;
}
li:after{
content:"...";
}
li a:after{
content:"...";
margin:-10px -18px 0 0;
display:block;
background-color:#fff;
}
}
</style>
<ul>
<li><a href="#">adfda阿三打发打三分爱的发地方爱的飞。</a></li>
<li><a href="#">阿三打发打三分爱的发地方爱的飞。</a></li>
<li><a href="#">阿三打发打三分爱的发地方爱的飞。</a></li>
<li><a href="#">W爱的飞。</a></li>
<li><a href="#">阿风热额为!</a></li>
<li><a href="#">阿三打发打三分爱的发地方爱的飞。</a></li>
<li><a href="#">一扇经常开启的门要润滑油。</a></li>
<li><a href="#">一扇经常开启的门的铰链不需要润滑油。</a></li>
<li><a href="#">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</a></li>
<li><a href="#">一扇经常开启的门的铰链滑油。</a></li>
</ul>
本站技术交流群:24735919,欢迎大家进群交流探讨!
近期评论