css 实现 多行溢出省略号， 省略号后面跟着 收起和展开

多行溢出出现省略号并在后面跟着收起或展开（css方案）：

方案简单易懂，但是存在兼容性，适用于在webkit内核的浏览器。

<div class="flex-box">
    <div class="content-box">
        <div class="parcel-box">
            <span class="text">文字</span>
            <span class="before"></span>
            <span class="buttom">展开</span>
        </div>
    </div>
</div>

.flex-box {
    display: flex;
}
.content-box {   
    width: 100%;
     word-break: break-all;
     overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.parcel-box { // 多加一层是由于出现过 ios 某些机型不生效
    height: 100%;
}
.before {
    float: right;
    width: 0;
    height: 100%;
    margin-top: -xx(buttom的高度)
}
.buttom {
    float: right;
    clear: both; // 这是重点，使父级的高度撑开，一列可以放下 before 和 buttom
    height: XX;
}

效果：