css省略号、div居中、css箭头常用方法

//单行省略
.ellipsis{
   overflow: hidden; 
   text-overflow:ellipsis;   
   white-space: nowrap;  
}
//多行省略 局限
.ellipsis-more{
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3; 
}

//div居中
.center-position{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.center-display{
   display: flex;
   align-items: center;   //垂直居中
   justify-content: center;   //水平居中
}

//css画箭头
.arrow{
    width: 12px;
    height: 12px;
    border-left: 1px solid #D2D2D2;
    border-bottom: 1px solid #D2D2D2;
    -webkit-transform: translate(0,-50%) rotate(-135deg);
    transform: translate(0,-50%) rotate(-135deg);
    position: relative;
    top: 6px;
}

// flex 布局中，防止图片压缩变形
.div{
  display: flex;
  img{
    flex-shrink: 0;/*防止被压缩导致变形*/ 
  }
}