必须显式设置min-width: 0才能激活word-break、overflow-wrap等样式，因grid子项默认min-width: auto（即min-content），遇长url等不可折行内容会优先撑开列宽而非换行；该声明须作用于.grid > .item层级，且需配合overflow-wrap或white-space等属性协同生效。
Grid子项必须显式设min-width: 0
不加这行，word-break、overflow-wrap全失效。浏览器给每个grid item默认加了min-width: auto（即min-content），遇到https://verylongurlwithoutspaces这种内容，宁可撑开整列也不折行。它不是样式没写对，是根本没获得“压缩权”。
必须作用于.grid > .item这一层——写在容器上、写在嵌套的div里、或者只用类名没限定层级，都不行。DevTools里看Computed值，确认min-width真正是0，而不是被组件库或重置样式覆盖回auto。
overflow-wrap: break-word和word-break: break-all怎么选
两者语义不同，不能互换：
-
overflow-wrap: break-word：只在整词放不下时才断，优先保留空格、斜杠、点号等自然断点，适合用户可见文本（如API路径、邮箱、长链接） -
word-break: break-all：在任意字符间硬切，比如把userEmail@example.com切成userE+mail@exa+mple.com，仅适用于日志ID、token、哈希值等无阅读语义的纯技术字段 - 别用
word-break: break-word——已被废弃，现代浏览器不保证支持
若需兼容老浏览器，可双写：overflow-wrap: break-word; word-wrap: break-word;（word-wrap是旧名）。
为什么minmax(0, 1fr)单独写在grid-template-columns里没用
轨道能缩，子项不配合，照样撑开。把1fr换成minmax(0, 1fr)只是告诉浏览器“这列可以缩到0”，但子项仍被min-width: auto锁死，内容顶着边界往外推。
必须两处同步改：
- 在
grid-template-columns中替换所有弹性列，例如：grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); - 同时给
.grid > *加min-width: 0
如果子项内还嵌了Flex或Grid，那嵌套结构的直接子元素也得加min-width: 0，否则撑开会逐层传导。
文字截断或换行还需配齐其他条件
min-width: 0解决的是“能不能缩”，不是“缩了之后怎么显示”。内容行为要另配：
- 单行省略：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis+max-width（缺一不可） - 自动换行：
overflow-wrap: break-word+max-width: 100%（或明确像素值） - 含代码块：
white-space: pre-wrap，保留缩进同时允许折行 - 图片/iframe：
max-width: 100%+height: auto，否则固有尺寸绕过所有收缩逻辑
最容易被忽略的是：父容器必须有明确宽度（width或max-width），否则overflow-wrap和text-overflow都失去“依据”，什么都不会发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
