Grid布局中“乱码”实为视觉错乱，本质是内容溢出导致轨道撑开、列宽失衡、换行异常；需三层控制：轨道层用minmax(0,1fr)防撑开，子项层设min-width:0允许可缩，内容层按类型配overflow-wrap、word-break或text-overflow。
Grid 布局中“乱码”其实是视觉错乱，本质是内容溢出导致布局崩塌或文字被截断变形——不是编码问题，而是 CSS 对长文本、无空格字符串（如 URL、哈希值）、图片等未做收缩约束所致。真正要防的是“撑开轨道→列宽失衡→横向滚动→文字换行异常→看起来像乱码”。关键不在字体或编码，而在三层控制：轨道弹性、子项收缩许可、内容裁剪/换行策略。
轨道层：用 minmax(0, 1fr) 替代纯 1fr
浏览器把 1fr 理解为“等分剩余空间”，但默认不设下限。遇到 https://example.com/a-very-long-path-with-no-hyphens-or-spaces 这类内容，它会强行拉宽整列，其他列被压缩甚至归零，造成视觉“错位”或“消失”，看着像乱码。
-
grid-template-columns: 1fr 1fr→ 实际等价于minmax(auto, 1fr) minmax(auto, 1fr)，仍受min-content锁定 -
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)→ 显式允许轨道缩到 0，是防撑开的前提 - 响应式多列推荐写法：
repeat(auto-fit, minmax(240px, 1fr))，auto-fit会收掉空轨道，避免列数虚高
子项层：必须给直接子元素加 min-width: 0
Grid 容器设了 minmax(0, 1fr) 还不够。它的直接子元素（比如 .grid > .item）默认有 min-width: auto（即 min-content），相当于“内容多宽，我就多宽”，根本不会缩。此时 overflow: hidden 压根不触发——因为容器没溢出，是被顶大了。
- 写法必须是：
.grid > .item { min-width: 0; }，不能只写.grid { min-width: 0; }（无效） - 如果
.item内部用了display: flex或display: grid，其直接子元素也得加min-width: 0，否则撑开会传导 - Vue 的
需用:deep(.item)；React 中若用 styled-components 包裹，样式必须落在真实 DOM 节点上
内容层：按需配对裁剪或换行规则
min-width: 0 只是“松刹车”，内容怎么处理还得靠具体策略。不同内容类型对应不同组合：
-
单行省略（如标题、用户名）：
min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，且该元素需是块级（display: block或inline-block） -
用户可见长文本（如评论、描述）：
min-width: 0; overflow-wrap: break-word;（推荐，兼容性好，语义清晰） -
无意义字符串（如 base64、token、哈希）：
min-width: 0; word-break: break-all;（注意 iOS 15 及更早 Safari 有 bug，需实测） -
图片 / 表格 /
等固有尺寸元素：max-width: 100%; height: auto;（图片）、table-layout: fixed;（表格）、overflow-x: auto;（预格式化文本）
特别注意嵌套与兼容性
第三方组件（如 Ant Design Card、Element Plus ElCard）默认不带 min-width: 0，需手动覆盖。绝对定位子元素（如角标、气泡）不受父容器 overflow: hidden 影响，父容器需加 position: relative 才能裁剪。
Safari（尤其 iOS 15 及更早）对 min-width: 0 支持不稳定，可加 !important，并确保写法是 min-width: 0（非 0px 或 0%）。可用 @supports (grid-template-columns: minmax(0, 1fr))) 做特性检测降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
