平时我们在做新闻列表(或者一行文字过多,又不想麻烦后台给我们切字数同时超出的显示省略号),我们就要自食其力,靠我们的神奇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。
转载于:https://blog.51cto.com/osweb/733280