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

该在哪插?认准天然逻辑断点
插错位置,
- 路径斜杠 / 后:比如
/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>
为什么有时加了也不换行?检查这三件事
- 父容器必须允许换行:确保没设
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")或服务端预处理备用方案
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











