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

问题

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

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

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

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

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

过程

    (1)尝试1

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

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