标题小屏溢出的根本原因是 flex/grid 容器中子元素默认 min-width: auto 阻止换行，需显式设 min-width: 0、overflow-wrap: break-word 和 word-break: keep-all，并配合 clamp() 控制字号。
为什么标题在小屏上不换行还溢出
根本原因不是没写 white-space，而是标题默认是 display: inline 或被父容器（比如 flex 项）限制了收缩能力。Grid/Flex 容器里的标题会继承 min-width: auto，哪怕写了 overflow-wrap: break-word 也无效——浏览器优先保证“内容最小宽度”，而不是让你断行。
- 检查 DevTools 的 computed 样式，确认标题的
min-width是不是auto - 如果父容器是
display: flex或display: grid，子标题必须显式设min-width: 0才能释放换行权 -
white-space: nowrap通常由组件库或重置样式偷偷加上，得手动覆盖
让标题真正换行的三行关键CSS
别堆属性，只写这三行，覆盖绝大多数场景：
.title {
min-width: 0;
overflow-wrap: break-word;
word-break: keep-all;
}
-
min-width: 0是破局点：干掉 Grid/Flex 默认的min-width: auto，让换行逻辑生效 -
overflow-wrap: break-word处理长 URL、英文单词等不可折字符串 -
word-break: keep-all对中文标题必需——否则浏览器可能把“用户体验”切成“用户 体验”，尤其在 Chrome 里
响应式字号配合换行更稳
光靠换行不够，字号太大时标题直接撑成单行，break-word 根本没机会触发。用 clamp() 把字号锁在合理区间：
Cn Password Generator
下载
安全的随机密码生成器。支持自定义长度、字符类型（大写/小写字母、数字、特殊符号），排除相似字符，批量生成。纯 Python 标准库，无需 API 密钥。
.title {
font-size: clamp(1.25rem, 4vw, 1.75rem);
}
-
clamp(最小值, 视口比例值, 最大值)让字号随屏幕缩放，但不会小到看不清，也不会大到撑单行 - 避免用
rem固定值 + 媒体查询组合——中间尺寸（比如折叠屏、分屏窗口）容易漏掉 - 如果标题嵌在
flex: 1容器里，额外加min-width: 0到该容器，否则flex会抢走收缩权
text-wrap: balance 能用吗
能，但别当主力。它只在 Chrome 117+ 和 Safari 17.4+ 有效，Firefox 和旧 Edge 完全忽略；而且必须满足：多行 + display: block + 明确 width 或 max-width，单行标题直接失效。
立即学习“前端免费学习笔记（深入）”；
- 当渐进增强用：
@supports (text-wrap: balance) { .title { text-wrap: balance; } } - 别和
text-overflow: ellipsis同时用——ellipsis 只作用于单行，跟balance冲突 - 字体还没加载完时（
font-display: swap），它按 fallback 字体宽度计算，换行会跳变一次
真正麻烦的从来不是换行本身，而是你得同时盯住 min-width、white-space、font-size 和父容器的布局模式——任意一环松动，换行就失效。
