css疑难点笔记

实现子元素垂直居中

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

第二种是设置行内元素的line-height=父级元素height
详尽可参考https://segmentfault.com/a/1190000000381042

多行文字实现...省略号的效果

实现demo如下

p{
    text-overflow:ellipsis;
    overflow:hidden;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;  /*此为显示两行；white-space:normal为显示一行*/
}

• 上面这是固定组合，且未考虑兼容性