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

相关推荐
西洼工作室15 分钟前
Strapi快速入门:从安装到API开发
前端·后端
繁花与尘埃22 分钟前
CSS简介(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
css·笔记·学习
光影少年27 分钟前
前端线上出现白屏如何排查问题所在,利用第三方的工具都有哪些
前端·学习·web安全·前端框架
濑户川31 分钟前
Vue3 计算属性与监听器:computed、watch、watchEffect 用法解析
前端·javascript·vue.js
_Sem40 分钟前
KMP实战:从单端到跨平台的完整迁移指南
android·前端·app
Carry34543 分钟前
React 与 Vue 开发差异——CSS 样式
前端
前端九哥1 小时前
我删光了项目里的 try-catch,老板:6
前端·vue.js
2301_764441331 小时前
身份证校验工具
前端·python·1024程序员节
4Forsee1 小时前
【Android】View 事件分发机制与源码解析
android·java·前端
一 乐2 小时前
车辆管理|校园车辆信息|基于SprinBoot+vue的校园车辆管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·车辆管理