前端样式CSS设置 display: ‘grid‘, gridTemplateColumns: ‘repeat(4, 1fr)‘ 部分电脑展示内容溢出

问题:

同样的前端代码样式 在不同电脑会导致样式长度溢出 都是使用 display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)'

正常样式:

异常样式:

当前相同代码 :

html 复制代码
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
  {zrjList.map((item: any, index) => {
    return <div/>
  })}
</div>

问题排查:

现场排查发现 部分电脑分辨率高些 并且电脑使用200%缩放 就会导致这种问题出现

而部分分辨率较低 使用125%缩放就不会出现这种问题

解决方案:

设置 min-width: 0 防止 Grid 子项溢出。
html 复制代码
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
  {zrjList.map((item: any, index) => {
    return <div style={{
                     minWidth: 0,    // 允许内容收缩
                     overflow: 'hidden' // 处理长文本/图片
                  }}
        
    />
  })}
</div>

解决效果:

相关推荐
guojl几秒前
深度剖析Kafka读写机制
前端
FogLetter1 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan2 分钟前
vscode webview 插件开发(精装篇)
前端
Mxuan3 分钟前
vscode webview 插件开发(交付篇)
前端
Mxuan4 分钟前
vscode 插件与 electron 应用跳转网页进行登录的实践
前端
拾光拾趣录4 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
Codebee4 分钟前
OneCode图表配置速查手册
大数据·前端·数据可视化
然我5 分钟前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html
Mxuan6 分钟前
vscode webview 插件开发(毛坯篇)
前端
FogLetter8 分钟前
前端性能优化:深入理解回流与重绘
前端·css