PHP小码农

Appearance

wbr 换行时机 ​

<wbr> 标签用于在文本中标记一个建议的换行点（Word Break Opportunity）。当一行文本过长时，浏览器会优先在 <wbr> 标记处换行。<wbr> 是一个空元素。

前置知识

阅读本节前，建议先了解：br 换行

基础概念 ​

<wbr>（Word Break Opportunity）告诉浏览器"如果需要换行，可以在此处换行"。与 <br> 不同，<wbr> 不是强制换行，而是建议换行点——只有当文本在一行内放不下时，浏览器才会在 <wbr> 处换行。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>wbr 示例</title>
</head>
<body>
  <!-- 长 URL 中的建议换行点 -->
  <p>访问 <a href="https://example.com/very/long/path">https://example.com/<wbr>very/<wbr>long/<wbr>path</a></p>

  <!-- 长单词或标识符 -->
  <p>错误代码：Super<wbr>Califragilistic<wbr>Expialidocious</p>
</body>
</html>

详细说明 ​

wbr 的默认行为 ​

  • <wbr> 本身不产生任何可见效果
  • 只有当文本超过容器宽度时，浏览器才会在 <wbr> 处换行
  • <wbr> 后换行时不添加连字符

wbr 与 br 的区别 ​

特性<wbr><br>
换行方式建议换行（仅在需要时）强制换行（始终换行）
可见效果无有换行
使用场景长 URL、长单词诗歌、地址

wbr 在长 URL 中的应用 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>长 URL 换行</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; }
    code { font-family: monospace; }
  </style>
</head>
<body>
  <h1>推荐的 URL 写法</h1>
  <p><code>https://developer.mozilla.org<wbr>/zh-CN<wbr>/docs<wbr>/Web<wbr>/HTML<wbr>/Element<wbr>/wbr</code></p>
</body>
</html>

实战示例 ​

代码标识符换行 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>代码标识符</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; }
    code { font-family: monospace; }
  </style>
</head>
<body>
  <h1>JavaScript 长方法名</h1>
  <p>调用 <code>document<wbr>.querySelectorAll<wbr>('.container > .item')</code></p>
  <p>使用 <code>Array<wbr>.prototype<wbr>.reduce<wbr>.call()</code></p>
</body>
</html>

注意事项 ​

  • <wbr> 不会添加连字符，如需连字符请用 CSS hyphens
  • 在现代浏览器中，URL 通常会自动在斜杠处换行，但 <wbr> 可以提供更精确的控制
  • 不要在中文文本中使用 <wbr>，浏览器会自动在字符间换行

最佳实践 ​

  1. 用于长 URL：在 URL 的斜杠后添加 <wbr>
  2. 用于长标识符：在驼峰命名或连字符命名中添加
  3. 不要用于中文：中文不需要 <wbr>，浏览器自动换行
  4. 不要滥用：只在确实需要控制换行点时使用

下一节

继续学习：ul 无序列表

参考链接 ​