多行文本末尾溢出文字显示省略号问题

问题

我之前作为开发者、亦或者作为一个先行者，都被问过很多次一个问题：“多行文本末尾的溢出怎么搞定？”。

说实话我对css理解的的确一般，但是对我个人而言我第一个想到的办法永远都是：

{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space：nowrap
}

但是这种写法带来的效果是无论你的文本内容又多少，都会被white-space属性强制限制为一行，并且末尾用省略号显示。而我对我的客户也都是回答以没有更好的办法来面对。

    今天依然遇到了这个问题，然而这次的客户不允许我这样来做。于是乎我神奇的在犄角旮旯里面翻到了我自己都不敢相信的解决办法。拿出来分享记录一下。编程真的就是你不自己亲自试一下真的不知道你自己居然能做出什么来。

过程

    (1)尝试1

    因为我很久很久之前在网上看到过一个css属性【line-clamp】，说是用来控制div内元素内容显示的行数的，但是我实际测试的时候发现并没有什么效果，所以当时就放弃没在研究。

    而今天被逼无奈于是我又一次找到了这个属性（本属性出处）。这次我有了一个新的发现就是这个属性是必须配合弹性盒子一起用才生效！于是我又跑去测试了display:flex弹性盒子，结果发现依然无效...

    (2)尝试2

    我放空思维，想到这个属性是我很久很久以前积累在脑子里的，那么当时的弹性盒子应该...大概还没有更新到最新，所以不如试试旧版本的弹性盒子。于是我又跑去测试了display:box和display:flex-box旧版本弹性盒子，嗯，振奋人心的结果...都是无效...

    (3)尝试3

    再次崩溃了一会，想到是不是这个属性太太太太老了，需要兼容性？自己手一抽，就开始疯狂添加私有前缀

//尝试1
display: box;
line-clamp: 4;

//尝试2
display: box;
-webkit-line-clamp: 4;

//尝试3
display: -webkit-box;
line-clamp: 4;

//尝试4
display: -webkit-box;
-webkit-line-clamp: 4;

不出所料，全失败...

    (4)尝试4

    这个时候说实话我已经放弃了，因为之前我就没有解决这个问题。这次本来我还是打算依然老办法对付客户，爱咋咋地那种。结果就在我去了个洗手间回来跟同事扯淡的时候，扫了一眼刚才没有关闭的网页，然后发现了下面这个东西！（就是尝试1中的那个链接！！！）

然后我马上搜了一下【box-orient】这个属性！！！

呵呵呵，看到私有前缀，我就有了新的灵感。

//尝试5
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;

简直我都蹦起来了！！！真赤鸡！！迅速加上了溢出隐藏代码

//尝试6
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;

OJBK！搞定老铁！

总结

    没什么事情是做不了的，就看你想不想做。一个人努力起来的能量真的会大到不可思议。加油！

//设置容器为【旧版本弹性盒子】，为了与旧属性适配
display: -webkit-box;

//设置容器内容显示最大行数，诸君自便，写几都可以
-webkit-line-clamp: 4;

//设置容器内容垂直排列，说实话这个为啥我暂时还没搞懂，不过看到了必要关联所以我加上了
-webkit-box-orient: vertical;

//溢出隐藏，不解释
overflow: hidden;