根本原因是为内联元素，需display:flex+white-space:normal+max-width组合解决换行、垂直居中、padding贴合及窄屏适配问题。
超链接在窄屏中不换行、文字溢出或居中失效，根本原因是 <a></a> 默认是内联元素，white-space: nowrap（浏览器默认）+ 缺乏块级上下文 + 居中方式错配。直接加 text-align: center 只能水平居中整行，无法解决单个链接内部多行文本的垂直对齐和 padding 一致性问题。
为什么 text-align: center + width: 100% 不够用
给 <a></a> 加 display: block 和 width: 100% 再套 text-align: center，看似能换行居中，但实际会暴露三个硬伤：
-
padding在换行后不再“贴合文字”，而是撑满整块宽度，导致上下留白远小于左右（尤其当父容器有固定height时） - 多行文本默认顶部对齐，视觉上“悬空”，没有垂直居中
- 响应式缩放时，固定
padding值可能让小屏文字被截断或边框压字
用 display: flex 让 <a></a> 自身成为居中容器
这是目前最干净、无需额外 wrapper、兼容性到 IE11 的解法。核心是把每个 <a></a> 当成一个独立 flex 容器，让其内容（纯文本节点）在主轴和交叉轴都自动居中：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.nav-link {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 8px 12px;
width: 100%;
box-sizing: border-box;
}
<p>/<em> 确保换行生效 </em>/
.nav-link {
white-space: normal;
word-break: break-word;
}
-
align-items: center解决多行文本垂直居中，不是靠line-height（那对多行无效） -
justify-content: center配合text-align: center覆盖所有换行场景，避免 flex item 文本因flex: none行为错位 -
white-space: normal是关键开关，否则<a></a>默认不换行 -
word-break: break-word防止长英文/URL 撑破容器（中文自动换行，可选）
窄屏适配要加媒体查询控制最大宽度
纯 flex 不足以应对极端窄屏（如 iPhone SE），需限制单个链接宽度防止过宽压迫内容：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 480px) {
.nav-link {
max-width: 85vw;
margin: 0 auto;
}
}
-
max-width: 85vw比100vw更安全，预留滚动条和边距空间 -
margin: 0 auto在 flex 容器里仍有效（作用于自身外边距），进一步强化水平居中容错性 - 避免用
width: 80%，它在嵌套 flex 中可能被父级压缩失真
真正难的不是让链接换行，而是换行后 padding 还能“咬住”文字轮廓、hover 边框不飘移、小屏下不因字体缩放导致上下留白崩塌——这些细节全靠 display: flex + 显式 white-space + max-width 组合守住。别信“加个 text-align 就完事”的速成方案，窄屏下的链接是布局脆弱点，得按 flex 容器逻辑重写语义。
