CSS实现超出部分省略(兼容各浏览器)

CSS代码如下:

ul { list-style-type:none; }
html>body ul.ellipsis ul{
clear:both;
list-style:none;
}

html>body ul.ellipsis li:after { 
content: "...";

}

html>body ul.ellipsis li span {
white-space:nowrap;
overflow:hidden;
max-width:178px;
width:auto !important;
display:inline;
float:left;
}

ul.ellipsis li span {
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
width:190px;
display:block;
}

测试的HTML代码如下:

  • 我是一个超长的我是一个超长的我是一个超长的我是一个超长的我是一个超长的
  • 我是一个超长的我是一个超长的我是一个超长的我是一个超长的我是一个超长的
  • 我是一个超长的我是一个超长的我是一个超长的我是一个超长的我是一个超长的
  • 我是一个超长的我是一个超长的我是一个超长的我是一个超长的我是一个超长的
  • 我是一个超长的我是一个超长的我是一个超长的我是一个超长的我是一个超长的

经过测试,在webkit引擎的浏览器中,会省略2次, 如果需要正常显示, 则需要对之进行必要的css hack.

XeonWell Studio