css样式

超出不换行省略号

overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

超出多行指定第几行省略号

 display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

弹性布局实现滑块

<div class="banner">
      <div class="combination"><img src="@/assets/img/Exclusivevideo/by.png" alt="" /></div>
      <div class="combination"><img src="@/assets/img/Exclusivevideo/hj.png" alt="" /></div>
      <div class="combination"><img src="@/assets/img/Exclusivevideo/bj.png" alt="" /></div>
      <div class="combination"><img src="@/assets/img/Exclusivevideo/zs.png" alt="" /></div>
    </div>

CSS部分

// 隐藏滚动条
.banner::-webkit-scrollbar {
        display: none;
      }
.banner {
  height: 316px;
  display: flex;
  overflow-x: auto;

  .combination {
    width: 576px;
    height: 216px;
    /*很重要，禁止子元素的收缩*/
    flex-shrink: 0;
    img {
      width: 100%;
    }
  }

设置背景为透明

  background-color: transparent;

弹性布局平均对齐
justify-content: space-between;会导致盒子不够会分开影响美观

.box{
 display: flex;
//justify-content: space-between;
 flex-wrap: wrap;
             .listBox-idol {
              width: 224px;
              height: 312px;              
              margin: 0 16px 16px 0;      
// 如果一行排列3个 3n 核心代码
              &:nth-child(3n) {
                margin-right: 0;
              }
              }
}