标签：
已知，单行文本溢出内容用省略号代替，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
标签：
原文地址：http://www.cnblogs.com/wbengineer/p/4625715.html
