css的多行省略

文本省略效果.png

• 常见的单行省略：

.line-one{
            display: block; //关键属性
            height: 22px; //关键属性
            white-space: nowrap; //关键属性
            overflow: hidden; //关键属性
            text-overflow: ellipsis; //关键属性
            border-bottom: 1px dashed #f9f9f9;
            margin-bottom: 10px;
            padding-bottom: 8px;
}

• 多行省略：

// 都是关键属性，不设置则显示不出来省略号
.line-two{
    height: 44px; //定高
    display: block;
    display: -webkit-box; //将对象作为弹性伸缩盒子模型显示，
    -webkit-line-clamp: 2; //设置显示的文本的行数
    -webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式 
    overflow: hidden;
    text-overflow: ellipsis;
}

源码：

.ellipsis-demo{
            width: 150px;
            margin:20px 0;
            font-size:14px;
            color:#333;
            line-height: 22px;
            color:#fff;
            border:1px solid #f2f2f2;
            padding: 10px 0;
        }
        .line-one{
            display: block;
            height: 22px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-bottom: 1px dashed #f9f9f9;
            margin-bottom: 10px;
            padding-bottom: 8px;
        }
        .line-two{
            height: 44px;
            word-break: break-word;
            display: block;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;

        }

<div class="ellipsis-demo">
    <div class="line-one">这是第一行内容，很长很长的第一行内容</div>
    <div class="line-two">这是第2天，第2天的内容，很长很长的第一行内容。这是第2天，第2天的内容，很长很长的第一行内容设置多行省略</div>
</div>