需用word-break和overflow协同控制：word-break: break-word或overflow-wrap: break-word实现长文本折行，overflow: hidden防止溢出撑开Grid单元格，并配合minmax(0, 1fr)等弹性网格定义确保布局稳定。
文字过长撑开 Grid 单元格、破坏整体布局，本质是内容未按容器约束自动换行或截断。关键在两处控制：让长文本主动折行（word-break），以及超出部分不溢出影响网格结构（overflow）。
用 word-break 控制换行行为
默认英文和数字连写不会断行，中文虽可断但遇到超长 URL 或无空格字符串仍会溢出。推荐组合使用：
- word-break: break-word; —— 兼容性好，对长单词/URL 强制在边界处折行（旧版 Chrome/Safari 支持）
- word-break: break-all; —— 更激进，任意位置都可断（适合纯数据展示，但可能割裂单词）
-
overflow-wrap: break-word; —— CSS3 标准属性，语义更清晰，现代浏览器首选（与
word-break: break-word效果类似）
配合 overflow 防止溢出干扰 Grid 结构
仅靠换行还不够，若容器高度固定或内容动态增长，仍可能撑高单元格。此时需明确溢出处理：
- overflow: hidden; —— 最常用，隐藏超出部分，确保 Grid 行高稳定
-
text-overflow: ellipsis; —— 配合
white-space: nowrap;实现单行省略（注意：必须限定宽度+块级+溢出隐藏） - 多行省略可用
display: -webkit-box;+-webkit-line-clamp;（仅 WebKit），但 Grid 中建议优先用overflow: hidden配合合理换行
Grid 容器本身也要留余地
别只盯着内容样式，Grid 模板定义也影响表现：
- 避免用
minmax(min-content, max-content)或fit-content()包裹易变文字区域，容易被长文本拉伸 - 推荐用
minmax(0, 1fr)或minmax(auto, 1fr)，让列/行有弹性收缩空间 - 对文字区加
align-self: start;或justify-self: start;，防止因对齐方式放大溢出影响
基本上就这些。核心逻辑是：先让文字能断，再让断不了的部分藏好，最后确保 Grid 自身不被带偏。不复杂但容易忽略细节。
