css多行文本省略号问题

已知，单行文本溢出内容用省略号代替，css代码如下：

text-overflow: ellipsis;    溢出部分用...代替
white-space: nowrap;     //强制在一行显示
overflow: hidden;//溢出隐藏

　今天刚好遇到关于多行文本溢出，超出部分用...代替的问题，查找了一些资料。原文参考页面底部的链接

1：WebKit浏览器或移动端的页面

需要使用webkit私有属性，css草案中没有，因此不是标准的css属性。css代码如下

display: -webkit-box; //作为弹性盒子模型显示
-webkit-box-orient: vertical;    //设置子元素的排列方式
-webkit-line-clamp:2;    //块元素显示文本行数
over-flow：hidden;
text-overflow: ellipsis;

2: 用包含...的元素模拟

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(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}

　　需要注意的是：1:设置hight是line-hight的整数倍，以免文本在盒子下方溢出时，露出部分残字：

2：伪类：after设置为position：absolute定位，目的是让插入的背景图片覆盖在文本框右下角，模拟溢出假象。可以直接设置background-color替换该背景图。

3：IE6/7不能读content内容，可用span标签<span>...</span>模拟；

还有两款小插件：

jQuery插件-jQuery.dotdotdot与Clamp.js没有使用

原文参考http://www.111cn.net/cssdiv/css/67208.htm