菜单项文字换行后布局错乱，根本原因是flex项目默认min-width:auto阻止收缩，须同时满足：white-space:normal、overflow-wrap:break-word、min-width:0加在.menu__item上；仅设文字容器样式无效。
菜单项文字换行后布局错乱怎么办
Flex 布局下菜单项文字换行，往往不是因为内容太长，而是因为 flex 项目默认的 min-width: auto 阻止了收缩——哪怕你写了 white-space: normal，文字也卡死不换行，反而撑开整个导航栏。
关键不是“让文字换行”，而是“让容器允许文字换行”。必须同时满足三个条件：
-
white-space: normal（恢复自然换行点） -
overflow-wrap: break-word（处理无空格长串，如 URL、Base64） -
min-width: 0加在菜单项（.menu__item）上，而非文字容器里
错误做法是只给 .menu__link 设 display: block 或 flex: 1，却不碰父级 min-width —— 这时浏览器仍按内容宽度分配空间，换行根本不会触发。
用省略号截断但保持按钮语义怎么办
<button> 元素本身不支持 text-overflow: ellipsis，这是规范行为，不是 bug。Chrome、Firefox、Safari 都无视你在 <button> 上直接写的 overflow: hidden + text-overflow。
立即学习“前端免费学习笔记（深入）”；
可靠解法是把文字抽出来包一层 <span>，并控制它的盒模型：
-
.btn设max-width和overflow: hidden -
.btn span设display: inline-block+width: 100%+white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 别用
flex包裹文字——IE11 不认min-width: 0，且部分 Safari 版本会忽略text-overflow
示例结构：<button class="btn"><span>超长菜单文字</span></button>。记得补 role="button" 和 tabindex="0"，否则键盘用户无法聚焦。
移动端小屏下允许折行但中文被硬切怎么办
别用 word-break: break-all。它会在任意字节断开，导致“身”“份证”这种不可读切分，对中文、日文完全不友好。
优先用 overflow-wrap: break-word，它只在必要时（比如连续 50 个英文字符或 Base64）才在单词内断行；配合 white-space: normal，中文和标点仍按自然语义换行。
如果按钮是 flex 子项，还必须显式设 min-width: 0——否则 flex 会固执地维持内容最小宽度，导致换行失效。这个细节在调试时最容易漏掉。
为什么设了 max-width 还不生效
两个常见原因：
-
max-width设在了<button>的父容器上，但没限制<button>自身宽度；或者用了width: 100%，结果继承的是父容器的无限宽（比如 flex 容器未设width） - 没配
overflow: hidden——text-overflow: ellipsis必须搭配overflow才能激活
最稳妥的做法：直接给 .menu__link 或 .btn 同时写 max-width: 160px + overflow: hidden，不要依赖父级约束。
真正难的不是写哪几行 CSS，而是判断当前场景该截断还是该换行、该用 break-word 还是 break-all、该动按钮本身还是动里面那层 span。这些选择一旦错，调试半天也看不出问题在哪。
