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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/376437.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

接口安全配置

问题点&#xff1a; 有员工在工位在某个接口下链接一个集线器&#xff0c;从而扩展上网接口&#xff0c;这种行为在某些公司是被禁止的&#xff0c;那么网络管理员如何控制呢&#xff1f;可以配置接口安全来限制链接的数量&#xff0c;切被加入安全的mac地址不会老化&#xff…

防火墙NAT智能选举综合实验

一、实验目的 1&#xff0c;办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换) 2&#xff0c;分公司设备可以通过总公司的移动链路和电信链路访问到Dmz区的http服务器 3&#xff0c;多出口环境基于带宽比例进行选路&…

Anaconda+Pycharm 项目运行保姆级教程(附带视频)

最近很多小白在问如何用anacondapycharm运行一个深度学习项目&#xff0c;进行代码复现呢&#xff1f;于是写下这篇文章希望能浅浅起到一个指导作用。 附视频讲解地址&#xff1a;AnacondaPycharm项目运行实例_哔哩哔哩_bilibili 一、项目运行前的准备&#xff08;软件安装&…

护网HW面试常问——组件中间件框架漏洞(包含流量特征)

apache&iis&nginx中间件解析漏洞 参考我之前的文章&#xff1a;护网HW面试—apache&iis&nginx中间件解析漏洞篇-CSDN博客 log4j2 漏洞原理&#xff1a; 该漏洞主要是由于日志在打印时当遇到${后&#xff0c;以:号作为分割&#xff0c;将表达式内容分割成两部…

Linux的世界 -- 初次接触和一些常见的基本指令

一、Linux的介绍和准备 1、简单介绍下Linux的发展史 1991年10月5日&#xff0c;赫尔辛基大学的一名研究生Linus Benedict Torvalds在一个Usenet新闻组(comp.os.minix&#xff09;中宣布他编制出了一种类似UNIX的小操作系统&#xff0c;叫Linux。新的操作系统是受到另一个UNIX的…

WGCLOUD的ping设备监测可以导入excel数据吗

可以的 WGCLOUD的v3.5.3版本&#xff0c;已经支持导入excel数据&#xff0c;如下说明 数通设备PING监测使用说明 - WGCLOUD

FreeRTOS学习(1)STM32单片机移植FreeRTOS

一、FreeRTOS源码的下载 1、官网下载 FreeRTOS官方链接 官方下载速度慢&#xff0c;需要翻墙&#xff0c;一般选择第一个 2、直接通过仓库下载 仓库地址链接 同样很慢&#xff0c;甚至打不开网页&#xff0c;也不建议使用这种方法。 3、百度网盘 链接&#xff1a;https:…

Java | Leetcode Java题解之第234题回文链表

题目&#xff1a; 题解&#xff1a; class Solution {public boolean isPalindrome(ListNode head) {if (head null) {return true;}// 找到前半部分链表的尾节点并反转后半部分链表ListNode firstHalfEnd endOfFirstHalf(head);ListNode secondHalfStart reverseList(firs…

百度智能云将大模型引入网络故障定位的智能运维实践

物理网络中&#xff0c;某个设备发生故障&#xff0c;可能会引起一系列指标异常的告警。如何在短时间内从这些告警信息中找到真正的故障原因&#xff0c;犹如大海捞针&#xff0c;对于运维团队是一件很有挑战的事情。 在长期的物理网络运维工作建设中&#xff0c;百度智能云通…

OpenCV距离变换函数distanceTransform的使用

操作系统&#xff1a;ubuntu22.04OpenCV版本&#xff1a;OpenCV4.9IDE:Visual Studio Code编程语言&#xff1a;C11 功能描述 distanceTransform是OpenCV库中的一个非常有用的函数&#xff0c;主要用于计算图像中每个像素到最近的背景&#xff08;通常是非零像素到零像素&…

数据结构(4.1)——串的存储结构

串的顺序存储 串&#xff08;String&#xff09;的顺序存储是指使用一段连续的存储单元来存储字符串中的字符。 计算串的长度 静态存储(定长顺序存储) #define MAXLEN 255//预定义最大串为255typedef struct {char ch[MAXLEN];//每个分量存储一个字符int length;//串的实际长…

【机器学习】精准农业新纪元:机器学习引领的作物管理革命

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀目录 &#x1f50d;1. 引言&#x1f4d2;2. 精准农业的背景与现状&#x1f341;精准农业的概念与发展历程&#x1f342;国内外精准农业实践案…

MySQL-ubuntu环境下安装配置mysql

文章目录 什么是数据库&#xff1f;一、ubuntu环境下安装mysql二、配置mysql配置文件1.先登上root账号2.配置文件的修改show engines \G; mysql和mysqld数据库的基础操作登录mysql创建数据库显示当前数据库使用数据库创建表插入students表数据打印students表数据select * from …

自动驾驶中的人机互相接管问题讨论

一、背景 人机接管&#xff08;human takeover&#xff09;是指在自动驾驶过程中&#xff0c;当系统遇到超出其处理能力或预设安全阈值的情况时&#xff0c;将控制权交还给驾驶员的过程。这一环节的设计直接关系到自动驾驶技术的实用性与安全性&#xff0c;是目前研究和实践中…

RequestContextHolder多线程获取不到request对象

RequestContextHolder多线程获取不到request对象&#xff0c;调用feign接口时&#xff0c;在Feign中的RequestInterceptor也获取不到HttpServletRequest问题解决方案。 1.RequestContextHolder多线程获取不到request对象 异常信息&#xff0c;报错如下&#xff1a; 2024-07-0…

Linux:Linux网络总结(附下载链接)

文章目录 下载链接网络问题综合问题访问一个网页的全过程&#xff1f;WebSocket HTTPHTTP基本概念GET与POSTHTTP特性HTTP缓存技术HTTP的演变HTTP1.1 优化 HTTPSHTTP与HTTPS有哪些区别&#xff1f;HTTPS解决了HTTP的哪些问题&#xff1f;HTTPS如何解决的&#xff1f;HTTPS是如何…

鸿蒙系统在服装RFID管理中的应用:打造智能零售新时代

​随着物联网技术的迅速发展&#xff0c;服装零售行业正面临着新的变革与挑战。鸿蒙系统作为新一代智能操作系统&#xff0c;结合RFID技术&#xff0c;为服装行业提供了高效、智能的管理解决方案。常达智能物联&#xff0c;作为RFID技术的领先企业&#xff0c;致力于将鸿蒙系统…

每日一练:奇怪的TTL字段(python实现图片操作实战)

打开图片&#xff0c;只有四种数字&#xff1a;127&#xff0c;191&#xff0c;63&#xff0c;255 最大数字为255&#xff0c;想到进制转换 将其均转换为二进制&#xff1a; 发现只有前2位不一样 想着把每个数的前俩位提取出来&#xff0c;组成新的二进制&#xff0c;然后每…

设计模式之外观模式(Facade)

Facade设计模式&#xff0c;也称为外观模式&#xff0c;是一种结构型设计模式&#xff0c;它主要用于为子系统中的一组接口提供一个统一的高层接口&#xff0c;从而使得子系统更加容易使用。以下是关于Facade设计模式的详细介绍&#xff1a; 一、定义 Facade模式为多个复杂的…

MVC之 IHttpModule管道模型《二》

》》》注意&#xff1a;在http请求的处理过程中&#xff0c;只能调用一个HttpHandler&#xff0c;但可以调用多个HttpModule。 HTTP Modules ASP.NET请求处理过程是基于管道模型的&#xff0c;这个管道模型是由多个HttpModule和HttpHandler组成&#xff0c;当请求到达HttpMod…