tab标题超长不换行，需先检查white-space是否被设为nowrap；修复方案包括覆盖为normal或pre-line、配合overflow-wrap:break-word、max-width限制及合理使用断点。
tab 标题超长不换行，先查 white-space 是否被设为 nowrap
几乎所有 UI 框架（如 Bootstrap、Ant Design、Element Plus）的 tab 组件默认会给 tab 标题加 white-space: nowrap——这是为了防止标题在窄屏下意外折行导致高度突变，但副作用是：超长标题直接溢出、撑宽 tab 容器、甚至触发横向滚动条。
修复只需定位到 tab 标题的 CSS 选择器（常见如 .ant-tabs-tab-btn、.el-tabs__item、[role="tab"]），覆盖该声明：
.my-tab-title {
white-space: normal; /* 必须覆盖掉 nowrap */
overflow-wrap: break-word; /* 允许 URL/驼峰名等在语义处断开 */
max-width: 240px; /* 建议设上限，否则小屏下仍可能过宽 */
}- 别只写
word-break: break-all：它会把userProfileData切成userPro…，破坏可读性 - 如果标题含换行符（比如后端返回的
"第一行\n第二行"），需额外加white-space: pre-line，而非normal - 某些框架用
display: inline-flex包裹标题，此时max-width可能失效，得加flex: 0 1 auto或改用width: 100%
带图标或 badge 的 tab 标题， 插在哪才真起作用
纯文字标题加 white-space: normal 就够了，但一旦混入图标（<i class="icon-user"></i>）或角标（<span class="badge">NEW</span>），浏览器就难判断“哪里算语义断点”。这时手动插 <wbr></wbr> 是最可控的方式。
关键不是“多插”，而是“插对位置”：
立即学习“前端免费学习笔记（深入）”；
- URL 类：插在
/、.、@后，如https://<wbr>api.<wbr>example.<wbr>com/<wbr>v2</wbr></wbr></wbr></wbr> - 驼峰命名：插在大写字母前，如
user<wbr>Profile<wbr>Settings</wbr></wbr>（不是use<wbr>rProfile</wbr>） - 图标前后不插：
<i></i><wbr>文本</wbr>无效；应确保<wbr></wbr>紧贴可断文本，如用户<wbr>管理<wbr>面板</wbr></wbr> - 服务端渲染时，用模板过滤器处理（如 Nunjucks 的
{{ title | wbr }}），避免前端 JS 遍历 DOM 注入 XSS 风险
移动端 tab 标题换行后高度不一致，怎么统一行高
换行后，单行标题高度是 line-height: 20px，双行变成 40px，tab 栏整体出现锯齿。这不是 bug，是正常流式布局行为，但体验差。
稳定高度的实操办法只有两个：
- 强制固定行高 + 裁剪：加
line-height: 20px; height: 40px; overflow: hidden;，但会截断第三行，慎用于支持三行标题的场景 - 用 flex 布局撑平：给 tab 标题容器设
display: flex; align-items: center; min-height: 40px;，让单行内容垂直居中，双行自然占满 - 绝对不要用
vertical-align: middle配合inline-block——不同字体渲染下 baseline 不一致，移动端尤其飘忽
Vue/React 中动态 tab 标题，为什么加了样式也不换行
常见于用 v-html 或 dangerouslySetInnerHTML 渲染标题时，样式看似生效，但实际没换行。根本原因是：这些 API 插入的是 HTML 字符串，若原始字符串里有未转义的 或 <code>>，浏览器会解析成标签，导致 <wbr></wbr> 被吞掉或 DOM 结构错乱。
安全做法分两层：
- 服务端或 API 层，对标题做 HTML 实体转义（
→ <code><），再插入<wbr></wbr> - 前端渲染时，不用
v-html，改用<span v-text="title"></span>或{title}，确保所有<wbr></wbr>作为纯文本节点存在 - 若必须保留富文本（如粗体、链接），用专用 Markdown 解析器（如 marked + DOMPurify），而不是正则替换
真实项目里最难的不是让标题折行，而是让「折行逻辑」和「交互反馈」对齐——比如 hover 时 tooltip 显示完整标题，点击后 active 状态的底边线不因换行偏移，这些细节不写死样式、不测真机，上线后必踩坑。
