實現(xiàn)子元素垂直居中
.content {
display: table-cell;/*display后不可讓父級元素bfc*/
padding: 10px;
border: 2px solid #999;
}/*父級元素設置固定高的話钞瀑，就會破壞掉墓拜，需要重新設置padding*/
.content div {
display: inline-block;
vertical-align: middle;
}
<div class="content">
<div style="padding: 50px 40px;background: #cccccc;color: #fff;"></div>
<div style="padding: 60px 40px;background: #639146;color: #fff;"></div>
<div style="padding: 70px 40px;background: #2B82EE;color: #fff;"></div>
<div style="padding: 80px 40px;background: #F57900;color: #fff;"></div>
<div style="padding: 90px 40px;background: #BC1D49;color: #fff;"></div>
</div>
第二種是設置行內(nèi)元素的line-height=父級元素height
詳盡可參考https://segmentfault.com/a/1190000000381042
多行文字實現(xiàn)...省略號的效果
實現(xiàn)demo如下
p{
text-overflow:ellipsis;
overflow:hidden;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2; /*此為顯示兩行凿叠；white-space:normal為顯示一行*/
}
- 上面這是固定組合，且未考慮兼容性
