css超出部分省略号设置

css超出部分省略号设置

css超出部分省略号设置

给容器添加一个指定类名，然后设置宽度
.overflow{
width:220px;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
说明：

white-space:nowrap;表示文本不会换行，在同一行继续，知道遇到标签为止；
overflow:hidden;不显示超过对象尺寸的内容，就是把超出的部分隐藏了；
text-overflow:ellipsis;当文本对象溢出是显示…，当然也可是设置属性为clip不显示点点点；
-o-text-overflow：为了兼容opera浏览器;

效果如下：