flexbox布局--右侧盒子文本过长用省略号, 导致左侧盒子宽度不生效

这篇笔记主要记录flex-shrink的使用.

flexbox布局--右侧盒子文本过长用省略号, 导致左侧盒子宽度不生效。如图, 给的圆圈宽度是67px,但实际上渲染出是54px

先看下代码,样式用的是unocss

xml 复制代码
   <div class="text-[#00E3FF] flex text-[80px] items-center h-[80px]">
           <!-- 左侧盒子 -->
            <div
              class="flex justify-center items-center bg-[transparent] w-[67px] h-[67px] border-solid border-[4px] rounded-[37px]"
              :class="getBorderBg(index)"
            >
              <div class="w-[48px] h-[48px] rounded-[24px]" :class="getCircleBg(index)"></div>
            </div>
            <!-- 右侧盒子 -->
            <div
              :title="item.name"
              class="text-white text-ellipsis overflow-hidden whitespace-nowrap pl-[56px] flex-grow"
            >
              {{ item.name }}
            </div>
          </div>

原因:右侧文本太多,占据了左边盒子的宽度,导致左边盒子宽度没生效。给左边盒子增加flex-shrink: 0,设置不压缩,就可以了。

scss 复制代码
   <div
              class="flex shrink-0 justify-center items-center bg-[transparent] w-[67px] h-[67px] border-solid border-[4px] rounded-[37px]"
              :class="getBorderBg(index)"
            >
              <div class="w-[48px] h-[48px] rounded-[24px]" :class="getCircleBg(index)"></div>
            </div>

MDN文档flex-shrink链接

动图证明flex-shrink

相关推荐
Bellafu66613 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird15 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者16 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强16 小时前
Chrome和IE获取本机ip地址
前端
天***889616 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*16 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls17 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友17 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵17 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
10年前端老司机18 小时前
Promise 常见面试题(持续更新中)
前端·javascript