根本原因是子项默认min-width: auto阻止压缩，必须同时设min-width: 0和overflow: hidden，并配white-space: nowrap与text-overflow: ellipsis才能生效。
grid-item上写了overflow: hidden但内容还是溢出
根本原因不是属性写错了，而是子项默认有 min-width: auto（等价于 min-width: min-content），浏览器宁可撑开单元格，也不裁掉内容。只加 overflow: hidden 不会触发截断。
必须同时设置：
-
min-width: 0（对水平溢出）或min-height: 0（对垂直溢出）——这是解锁压缩能力的开关 - 明确的尺寸约束：比如
width、max-width、height或由网格轨道（如grid-template-columns: 200px）提供边界 - 若要显示省略号，还得配
white-space: nowrap+text-overflow: ellipsis
常见错误：在卡片组件里给 .card-desc 加了 overflow: hidden，但没设 min-width: 0，结果长昵称把整列拉宽，右侧卡片错位。
grid容器设了overflow: auto却没滚动条
因为 Grid 容器默认不创建 BFC，且子项会主动撑开它——overflow 根本没生效对象。容器只有在「自身有明确尺寸约束」的前提下，才能成为滚动上下文。
有效做法是：
- 给容器加
max-width或max-height（例如max-height: 300px），再配overflow-y: auto - 避免只用
grid-template-rows: 1fr——它会让行高无限伸展，除非外层有高度封顶 - 若需横向滚动，确保列轨道没用
max-content或未约束的1fr；改用minmax(0, 1fr)或minmax(0, 300px)
调试时检查 getComputedStyle(container).height，如果返回 auto 且实际渲染高度远超预期，大概率是轨道尺寸失控了。
grid-column 越界导致元素直接消失
显式写 grid-column: 6 / 9，但容器只有 4 列轨道时，该子项不会隐藏，而是被渲染引擎彻底丢弃——控制台无报错，DOM 里也查不到，页面“少了一块”。
安全写法：
- 用
grid-column: 1 / -1表示“占满所有列”，比硬编码大数字可靠 - 动态生成样式时，先用
getComputedStyle(gridEl).gridTemplateColumns解析列数，注意处理repeat(3, 1fr)这类函数值 - 真需要越界定位（比如悬浮层覆盖多列），别强求 grid 轨道，改用
position: absolute+inset
这个行为在 Safari 和 Firefox 中一致，但容易误判为 JS 渲染 bug，其实纯属 CSS 规范定义。
文本在单元格内不换行、长单词突破边界
overflow: hidden 对长英文、base64 字符串、URL 等无空格内容完全无效——它们会被当做一个不可折行的原子，min-width: 0 也压不住。
必须叠加断词策略：
-
word-break: break-all：暴力拆分，适合日志、哈希值 -
overflow-wrap: break-word：优先保持单词完整，仅在必要时折行，适合普通文本 - 两者可共存，
overflow-wrap优先级更高
注意：white-space: normal 是前提，否则 break-word 不起作用；移动端 iOS Safari 对 overflow-wrap 支持稳定，但旧版 Android WebView 可能需要 word-wrap: break-word（已废弃但兼容性更好）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
