css文字自适应宽度动态出现省略号...

前言

在列表排行榜中通常会出现的一个需求：从左到右依次是名次、头像、昵称、徽标、分数。徽标可能会有多个或者没有徽标，徽标长度是动态的，昵称如果过长要随着有无徽标进行动态截断出现省略号。如下图布局所示（花里胡哨的底色是为了看的更清楚，咱忍忍。。。）

一、实现效果

• 多个徽标

          

  • 一个徽标

             

    • 没有徽标

              

       影响中间文字部分动态截断实现方法：

      • 设置昵称和徽标这个整体div的宽度；​​​​​​​
        • 方法1️⃣：昵称部分div设置为 flex-shrink: 1 自动收缩宽度；
        • 方法2️⃣：昵称部分div设置为 flex: 1;min-width: 0；

          二、结构拆分

                  

          1. 使用flex左右布局，分数之前为左边，分数固定最大长度为右边；
          2. 左边的内容继续使用flex布局排列，固定名次、头像宽度；
          3. 昵称和徽标的模块使用flex布局，给定一个大概宽度，昵称设置截断省略；

          三、全部代码

          1.整体结构

          代码如⬇️：

            
            
              
                1
                
                
                  lemon是我的名字lemon是我的名字lemon是我的
                  
                  
                
              
              666
            

          2.css样式

          代码如下⬇️：

          .item-wrapper {
            width: 100%;
            height: 62pit;
            flex: 0 0 auto;
            overflow: hidden;
            background-color: gray;
            padding: 0 16pit;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
          }
          .item-left {
            overflow: hidden;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            background-color: rgb(139, 201, 237);
          }
          .item-left-num {
            flex: 0 0 auto;
            font-family: PingFangSC-Medium;
            font-size: 20pit;
            color: #333;
            font-weight: 700;
            line-height: 62pit;
            letter-spacing: 0;
            width: 26pit;
            text-align: center;
            background-color: rgb(225, 131, 197);
          }
          .item-left-avatar {
            flex: 0 0 auto;
            width: 38pit;
            height: 38pit;
            background-color: #fff;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            border-radius: 36px;
            margin-left: 8pit;
          }
          .item-left-text {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 55vw;
            background-color: #333;
          }
          .item-left-name {
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 14pit;
            line-height: 62pit;
            color: #333;
            letter-spacing: 0;
            margin-left: 8pit;
            // 方式1️⃣
            // flex: 1;
            // min-width: 0;
            // 方式2️⃣
            flex-shrink: 1; // 自动收缩宽度
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background-color: aqua;
          }
          .item-left-icon {
            height: 16pit;
            background-color: #fff;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            margin-left: 4pit;
          }
          .item-left-level {
            flex: 0 0 auto;
            width: 32pit;
          }
          .item-left-fan {
            flex: 0 0 auto;
            width: 52pit;
          }
          .item-right {
            flex: 0 0 auto;
            font-family: PingFangSC-Medium;
            font-weight: 400;
            line-height: 62pit;
            font-size: 12pit;
            color: #666;
            letter-spacing: 0;
            text-align: right;
            width: 52pit;
            margin-left: 16pit;
            background-color: rgb(240, 171, 229);
          }