image.png

    实现上图的布局，视口缩放时每行依旧显示6个元素，文字多长显示省略号，当鼠标悬浮的时候展示全部
    看一下代码实现吧

    1. html元素

      1. <div class="card_view">
      2. <div class="card_view-item" v-for="(card, index) in listData" :key="index">
      3.  <card :cardData="{name:card.name}"></card>
      4. </div>
      5. </div>

    2. less控制每行布局

      1. .card_view {
      2. display: flex;
      3. justify-content: flex-start;
      4. flex-flow: row wrap;
      5. align-items: flex-start;
      6. &-card {
      7.  border-radius: 8px;
      8.  cursor: pointer;
      9.  height: 36px;
      10.  position: relative;
      11.  margin-left: 16px;
      12.  margin-top: 16px;
      13. }
      14. &-item {
      15.  flex: 0 0 16.66%;
      16. }
      17. }

    3. card 组件

      1. <div class="textCard">
      2. <div class="ellipsis card-name">{{cardData.name}}</div>
      3. </div>

      ```less .textCard { border-radius: 8px; cursor: pointer; background-color: aqua; height: 36px; position: relative; margin-right: 16px; margin-top: 16px; color: #333; .card-name { position: absolute; top: 0; left: 0; display: inline-block; width: 100%; padding: 8px 14px; border-radius: 8px; line-height: 20px; box-sizing: border-box; } &:hover { .card-name { color: #fff; white-space: normal !important; overflow: unset !important; background-color: aqua; box-shadow: 0 6px 200px rgba(71, 96, 240, 0.2); z-index: 9; } } }

    ```