css 超出长度显示省略号...

div+css

单行文本显示...

一般要指定宽度，然后给如下四个属性。

display:bolck;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

案例代码：

.haorooms{width:200px;display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

多行文本显示....

主要属性-webkit-line-clamp

p {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。

跨浏览器兼容的方案

比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
   // background:url(和网页背景颜色一样的一张背景图) repeat-y;
  background-color:#fff;
}

注意：

height高度正好是line-height的3倍；

结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；

IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用...去模拟；

要支持IE8，需要将::after替换成:after；

摘自http://www.haorooms.com/post/css_common