CSS把容器中的内容限制行数,在超过行数后,在最后一行显示"..."

<style type="text/css">
    .main{
        width: 400px;
        background-color: #3498db;
        display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/
        -webkit-box-orient: vertical; /*值必须为vertical*/
        -webkit-line-clamp: 3; /*值为数字,表示一共显示几行*/
        overflow: hidden;
    }
</style>


<div class="main">
        多行文字溢出多行文字溢出多行文字溢出多行文字溢出多行文字溢出多行文字溢出多行文字溢出多行文字溢出多行文字溢出多行文字溢出多行文字溢出多行文字溢出多行文字溢出多行文字溢出多行文字溢出多行文字溢出多行文字溢出多行文字溢出多行文字溢出多行文字溢出<
</div>   

结果:
多行文字溢出多行文字溢出多行文字溢出多行文字溢出多
行文字溢出多行文字溢出多行文字溢出多行文字溢出多行
文字溢出多行文字溢出多行文字溢出多行文字溢出多...

 

posted @ 2020-06-28 10:16  ssjd  阅读(624)  评论(0编辑  收藏  举报