标签在技术文档中用于提示浏览器在API等超长字符串的语义断点（如/、.、?、&、=、驼峰大写字母前）处智能换行，不强制生效，需配合white-space: normal、宽度约束及避免CSS冲突才能起作用。

标签在技术文档里不是用来“让文字换行”，而是告诉浏览器：“这段超长API指令里，这些位置逻辑上可以断，但你得自己判断要不要断”。它不加空格、不插连字符、不改变复制内容，只在容器变窄、整串撑不下时悄悄起作用——这对保持API可读性、可点击性和响应式体验很关键。

该在哪插？认准天然逻辑断点

插错位置，就等于没插。重点盯住API指令中语义明确的分隔处：

• 路径斜杠 / 后：比如 /api/v2/<wbr>users/<wbr>1234567890</wbr></wbr>（不是 /api/<wbr>v2/users</wbr>）
• 域名点号 . 后：如 https://<wbr>api.example.<wbr>com/<wbr>v1</wbr></wbr></wbr>
• 查询参数符号 ?, &, = 后：例如 ?filter=<wbr>active&sort=<wbr>createdAt</wbr></wbr>
• 驼峰命名大写字母前：如 fetch<wbr>Data<wbr>From<wbr>API<wbr>v2</wbr></wbr></wbr></wbr>
• 版本号与字母交界：如 v2<wbr>beta</wbr>、alpha<wbr>4</wbr>

为什么有时加了也不换行？检查这三件事

本身不强制生效，它需要“配合”才能被浏览器看见：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 父容器必须允许换行：确保没设 white-space: nowrap；若用了 <code> 标签，需额外加 white-space: normal
• CSS 策略不能冲突：禁用 word-break: break-all（它会直接忽略所有 ）；推荐搭配 overflow-wrap: break-word
• 容器要有宽度约束：没有 width、max-width 或弹性限制，浏览器压根不触发“需要换行”的判断

避免踩坑：哪些地方别乱加

不是所有长文本都适合 ，滥用反而降低可维护性：

立即学习“前端免费学习笔记（深入）”；

• 普通英文句子或中文段落：中文按字换行，英文有空格，无需干预
• 纯数字串中间：如 1234567890 任意位置加 没语义意义，也不提升可读性
• <pre class="brush:php;toolbar:false;"></pre> 或 <textarea></textarea> 内：预格式化元素默认禁用自动换行， 无效
• 按钮文字、表单 label 等屏幕阅读器敏感区域：多余断点可能打乱语音节奏

进阶建议：自动化 + 多端适配

手动给每个 API 路径加 不现实，可结合工程实践提升效率：

• 前端 JS 批量处理：对带 class="api-path" 的元素，用正则匹配 /[\/._?&=#@]/g，在匹配符后插入
• 服务端模板过滤器：如 Nunjucks 中定义 {{ path | wbr_path }}，统一注入逻辑断点
• 窄屏增强策略：在 @media (max-width: 480px) 中，对技术类文本增加更细粒度的 （如在连字符、下划线两侧）
• 兼容兜底：老旧浏览器（如 IE）不支持 ，可配合 hyphens: auto（需 lang="en"）或服务端预处理备用方案