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

前言

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

一、实现效果

• 多个徽标

        

• 一个徽标

         

• 没有徽标

        

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

• 设置昵称和徽标这个整体div的宽度；​​​​​​​

• 方法1️⃣：昵称部分div设置为 flex-shrink: 1 自动收缩宽度；
• 方法2️⃣：昵称部分div设置为 flex: 1;min-width: 0；

二、结构拆分

        

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

三、全部代码

1.整体结构

代码如⬇️：

  <!-- 整行 -->
  <div class="item-wrapper">
    <div class="item-left">
      <div class="item-left-num">1</div>
      <image class="item-left-avatar" src="xxx" />
      <div class="item-left-text">
        <div class="item-left-name">lemon是我的名字lemon是我的名字lemon是我的</div>
        <image class="item-left-icon item-left-level" src="xxx" />
        <image class="item-left-icon item-left-fan" src="xxx" />
      </div>
    </div>
    <div class="item-right">666</div>
  </div>

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);
}