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

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

.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;
}