css 设置 多行超出 显示为 省略号 ，可 多行超出 显示为 省略号

开发过程中我们可能会遇到这样的需求：

        有一行文本，不足一行，全部显示，超出一行，行尾显示为省略号。

可能你会有些扫操作，用 JS 去动态的判断，尽管效果已经实现，但是看上去搓的一逼，配不上前端这个词。

下面给你介绍 两种 优雅的 方式 ，来实现这个效果。

 

HTML如下：

<div class="text-to">
       这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，
       这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，这是测试，
       这是测试，这是测试，这是测试
</div>

1：一行，超出显示为省略号

.overflow-to-ellipsis{
    width: 200px;
    background: red;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

效果如图：

 

但是，某些时候，产品经理似乎总有改不完的需求和各式各样变态的需求。

比如，两行超出显示为省略号

再比如，三行超出显示为省略号

再比如......

2、多行，超出显示为省略号

备注：此方法兼容性不佳，safari 和 chrome 支持比较好，所以感觉在 移动端 比较好用吧

.text-to {
    background: red;
    color: white;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
     display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
   
}

效果如下： 

修改 -webkit-line-clamp 的 值，就可以控制行数。