css文本溢出隐藏显示省略号（单行+多行）

文本超出若干行就换行，这个功能几乎每个文本浏览网站都会用到，实现它的办法也有很多，今天简单的介绍一下实现它的方法。

 一. 单行文本不换行，并将超出文本隐藏

.box-content{

    overflow: hidden;//文本溢出隐藏

    text-overflow: ellipsis;//文本溢出显示省略号

    white-space: nowrap;//不换行

}

 

二. 在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;

}

因为它是webkit内核浏览器的实现，对于其他浏览器并不兼容，所以为了兼容更多的浏览器，可以如下的方法来实现。

三. 兼容所有浏览器的方法

这种方法利用css的伪选择器after来实现，将元素定位设为relative，将伪选择器设为absolute，在对伪选择器的位置进行调整即可。如下：

两行溢出省略

p {
position: relative;
line-height: 20px;
max-height: 40px;
overflow: hidden;
60px;
}

p::after {
display: block;
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
}

提示：设置要显示的行数只需要将height设为line-height的整数倍即可。

由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。