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