【复制粘贴 - css 】

1. 多行显示省略号

   word-break: break-all;
   text-overflow: ellipsis;
   overflow: hidden;
   -webkit-line-clamp: 2;  /** 设置行数 **/
   
   
   单行显示
    
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    height: 50px;
    display: block;
    width: 280px;
    font-size: 36px

2. 水平垂直

  display: flex;
  flex-direction: column;
  justify-content: center;

3. clearfix 先设置宽高

 content: '';
 display: block;
 clear: both;

4. How can I fill a div with an image while keeping it proportional?

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

<div class="fill">
    <img src="https://picsum.photos/id/237/320/240" alt="" />
</div>

img {
   object-fit: cover;
   width: 50px;
   height: 100px;
}

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}​