css 超出文字显示省略号

 平时我们在做新闻列表（或者一行文字过多,又不想麻烦后台给我们切字数同时超出的显示省略号），我们就要自食其力，靠我们的神奇CSS来解决问题。

看上图，我们就要达到这种效果，超出范围的字数显示省略号。

HTML

<ul >

<li>1111111111111111</li>

<li>2222222222222222</li>

<li>3333333333333333</li>

<li>4444444444444444</li>

</ul>

CSS 

ul li{

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

width:50px;

}

 因为list-style-position默认为outside,如果你想显示前面的标记，就得把list-style-positiong改为inside。因为前面设置了overflow:hidden。

本文出自 “osweb” 博客，转载请与作者联系！