盘点常用css

1、省略号显示
1）单行省略号

.single_line{ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}

2）多行省略号显示

.multi_line{ 
    overflow : hidden; 
    text-overflow: ellipsis; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
}

2、元素宽高比固定，如何让高度随宽度的变化自适应变化

<div class="map_outerDiv">
  <div id="map_wrapper"></div>
</div>
// 例如：宽高比 = 351/191 = 1.8， 那么padding-bottom 就=191/351，高度是宽的的54%
<style>
    .map_outerDiv {
        width:100%;
        position:relative;
        padding-bottom:54%; // ps 宽*54% = padding-bottom精确像素
    }
     #map_wrapper {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
</style>