如何控制文本只能显示两行，多余的截取为省略号，要求纯css、js实现，兼容主流浏览器（含IE 8）

Question

如何控制文本只能显示两行，多余的截取为省略号，要求纯css、js实现，兼容主流浏览器（含IE 8）, 页面宽度是用百分比控制。（-webkit-line-clamp 不兼容ie系列）

<style>

    .container {

        width: 100px;

    }

    #main {

    width: 60%;

    margin: 0 auto;

    height: 60px;

    line-height: 30px;

    }

</style>

<div class="container">

    <div id="main">

    多想就这样，陶醉在

    这片绿盈盈的荷塘上

    

    任清风吹拂，任心事成茧

    

    也没有风花雪月里的那一枚飘零的落叶

    

    多想就这样，陶醉在

    这片绿盈盈的荷塘上

    

    任清风吹拂，任心事成茧

    

    也没有风花雪月里的那一枚飘零的落叶

    

    多想就这样，陶醉在

    这片绿盈盈的荷塘上

    

    任清风吹拂，任心事成茧

    

    也没有风花雪月里的那一枚飘零的落叶

    

    </div>

</div>