CSS多行文字超出隐藏并省略号，固定多行隐藏

CSS多行文字超出隐藏并省略号，固定多行隐藏

要求：下图限制3行，超出用省略号省略后面内容。。。

加入文件都在p元素中：

p{
    display: -webkit-box;
    -webkit-box-orient: vertical;    // 设置子元素朝向为 垂直方向
    -webkit-line-clamp: 3;     // 设置为多少行
    overflow: hidden;    // 超出隐藏
    width: 450px;    // 兼容IE的
}

结果：

https://v.douyin.com/CeiJkmM36/

方法一(存在兼容性)：

<div class="container">
    <div class="text-container">
        <div class="more">...</div>
        <div class="content">            
            hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello;
        </div>
    </div>
</div>

<style>
    .container{
        width: 400px;
        word-break: break-all;
    }
    .text-container::before{
        content: '';
        display: block;
        height: 20px;        
        margin-top: -0px;
    }
    .more{
        float: right;
    }
</style>

方法二（极力推荐）：

<div class="container">
    <div class="text-container">
        <div class="more">...</div>
        <div class="content">            
            hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello;
        </div>
    </div>
</div>

<style>
    .container{
        width: 400px;
        word-break: break-all;
    }
    .text-container{
        overflow: hidden;
        height:88px;
    }
    .text-container::before{
        content: ' ';
        display: block;
        height: 62px;
    }
    .more{
        float: right;
    }
    .content{
        margin-top: -61px;
    }
</style>