css实现文本超出隐藏，并显示省略号

示例：下图是我的代码

1.单文本超出显示省略号

步骤1：white-space:nowrop;（ 不换行 , 对于连续的数字或者英文字母可省略 ）

步骤2：overflow:hidden; （溢出隐藏）

步骤3：text-overflow：ellipsis; （文本溢出显示省略号）

具体代码实现：

css代码__________________________________________________________

    .box{

      width: 200px;

      height: 50px;

      border: 1px solid red;

      /* 单行超出省略号 */

      white-space: nowrap;

      overflow: hidden;      

      text-overflow: ellipsis;

    }

html代码_________________________________________________________

    <div class="box">

      我在测试我在测试我在测试我在测试我在测试我在测试

      我在测试我在测试我在测试我在测试我在测试我在测试我在测试我在测试我在测试我在测试

    </div>

2. 多行超出显示省略号

在Webkit内核的浏览器中实现多行文本隐藏并显示省略号

在webkit内核中，可以利用-webkit-line-clamp属性，它的值是数字(1, 2, 3…)，但它不是CSS标准，只在webkit中实现，必须针对块级元素，并将元素的display属性设为:-webkit-box，以及-webkit-box-orient属性设为:vertical，

具体如下：

.box{

         width: 200px;

         height: 50px;

         border: 1px solid red;

   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;
width: 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。