单行文本不换行，并将超出文本隐藏
.box-content{
overflow: hidden;//文本溢出隐藏
text-overflow: ellipsis;//文本溢出显示省略号
white-space: nowarp;//不换行
} ### 在Webkit内核的浏览器中实现多行文本隐藏并显示省略号 在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行隐藏，并显示省略号
overflow: hidden;
}
兼容所有浏览器的方法
这种方法利用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;
}
提示：设置要显示的行数只需要将height设为line-height的整数倍即可。
由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：…）；兼容ie8需要将::after替换成:after。
