单行文字垂直居中
知道容器的高度即可
html
<div class="wrapper">
test
</div>
css
.wrapper {
height: 3em;
line-height: 3em;
border: 1px solid #00a5d7;
}
多行文字垂直居中
html
<div class="wrapper">
<p>text1</p>
<p>text2</p>
</div>
css
.wrapper {
display: table-cell;
vertical-align: middle; //Your must add this style，the default is baseline
height: 5em;
}
多行文本溢出用省略号表示
.box {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
其中-webkit-line-clamp就是控制行数的，是3就是显示3行，3行结束点点点，如果是2则最多2行。
