需用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 自身不被带偏。不复杂但容易忽略细节。