标签：方法 选择器 ati line number 内容 abs 数字 ips
文本超出若干行就换行，这个功能几乎每个文本浏览网站都会用到，实现它的办法也有很多，今天简单的介绍一下实现它的方法。
.box-content{
overflow: hidden;//文本溢出隐藏
text-overflow: ellipsis;//文本溢出显示省略号
white-space: nowarp;//不换行
}
在webkit内核中，可以利用-webkit-line-clamp属性，它的值是数字(1, 2, 3…)，但它不是CSS标准，只在webkit中实现，必须针对块级元素，
并将元素的display属性设为:-webkit-box，
以及-webkit-box-orient属性设为:vertical，具体如下：
.box-content{ display: -webkit-box; //将元素设为盒子伸缩模型显示 -webkit-box-orient: vertical; //伸缩方向设为垂直方向 -webkit-line-clamp: 3; //超出3行隐藏，并显示省略号}因为它是webkit内核浏览器的实现，对于其他浏览器并不兼容，所以为了兼容更多的浏览器，可以如下的方法来实现。
这种方法利用css的伪选择器after来实现，将元素定位设为relative，将伪选择器设为absolute，在对伪选择器的位置进行调整即可。如下：
两行溢出省略
p {
position: relative;
line-height: 20px;
max-height: 40px;
overflow: hidden;
width: 60px;
}
p::after {
display: block;
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
}
由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。
标签：方法 选择器 ati line number 内容 abs 数字 ips
原文地址：http://www.cnblogs.com/coderL/p/7479878.html
