纯css3 实现多行显示隐藏和文本垂直居中

 <div class="clear test-div">
          <section class="fl test-sc">1section>
          <section class="fl test-sc test-sc2">
            <p class="text-p">谁怕，一蓑烟雨任平生哈哈哈哈p>
          section>
          <section class="fl test-sc">5section>
div>

css代码:

.clear {
    clear: both;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.test-div .test-sc{
    margin: 2px;
    width: 100px;
    height: 100px;
    border: 1px solid yellowgreen;
}
.test-sc2{
    align-items:center;
    display: flex;
    display: -webkit-flex;
    justify-content:center; 
}
.text-p{
    width: 100%;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2;
    overflow: hidden; 
}