HTML 换行：br 标签、换行符与断行位置

如何换行

在你想另起一行的位置放上 <br>。它是空元素，所以没有结束标签：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line break</title>
</head>
<body>
  <p>
    Coddy Ltd.<br>
    12 Market Street<br>
    Springfield
  </p>
  <p>Pressing Enter in the source
     does not break the line.</p>
</body>
</html>

地址正好在每个 <br> 处换行。第二段虽然源代码中有换行符，却仍然显示在一行：HTML 会把换行符、制表符和连续的空格都当作一个空格。这正是 <br> 存在的原因。

<br>、<br/> 和 <br /> 生成的是同一个元素。你的项目用哪种就用哪种（JSX 和 XHTML 要求写斜杠）。

br 与 p：换行不是间距

<br> 在同一个段落内结束一行。新的 <p> 则开始一个新段落，默认外边距会在它的上下留出空间。堆叠 <br> 标签来制造间距虽然可行，但很脆弱，而且表达的意思也不对：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>br vs p</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { border: 2px solid #e5e7eb; padding: 0 12px; margin-bottom: 12px; }
    .spaced p { margin: 0 0 24px; }
  </style>
</head>
<body>
  <div class="box">
    <p>With br tags:<br><br><br>Second paragraph?</p>
  </div>
  <div class="box spaced">
    <p>With two paragraphs and CSS margin:</p>
    <p>Second paragraph.</p>
  </div>
</body>
</html>

两个盒子看起来差不多，但对屏幕阅读器来说，第一个只是一个段落，而且想调整间距就得修改每个页面。在第二个盒子里，间距只是一行 CSS。

<br> 的合适用途：地址、诗歌和歌词，以及签名中的各行，这些换行本身就属于文本。其他情况请使用段落、列表或标题。

保留文本中的换行符

当文本来自别处（评论框、数据库、脚本）时，它包含的是真正的换行符，而不是 <br> 标签。CSS 的 white-space: pre-line 让浏览器把这些换行符显示为换行：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pre-line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .msg { border: 2px solid #e5e7eb; padding: 8px 12px; margin-bottom: 8px; }
    .keep { white-space: pre-line; border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="msg" id="a"></div>
  <div class="msg keep" id="b"></div>
  <script>
    const text = 'Hi team,\nThe build is fixed.\nThanks!';
    document.getElementById('a').textContent = text;
    document.getElementById('b').textContent = text;
  </script>
</body>
</html>

同一个字符串在灰色盒子里显示为一行，在蓝色盒子里显示为三行。这也比用 innerHTML 往用户文本里拼接 <br> 标签更安全，后者会让用户能够注入 HTML。如果还要保留空格和缩进，请使用 white-space: pre，HTML 空格一页中有详细介绍。

让长单词断开：wbr

没有空格的长单词或 URL 可能会溢出窄盒子。<wbr> 标记一个位置，浏览器在需要时可以在这里断行，不需要时则什么也不做：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wbr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 160px; border: 2px solid #f59e0b; padding: 4px; margin-bottom: 12px; }
  </style>
</head>
<body>
  <div class="narrow">example.com/docs/html/line-break-tag</div>
  <div class="narrow">example.com/<wbr>docs/<wbr>html/<wbr>line-break-tag</div>
</body>
</html>

第一个路径超出了它的盒子；第二个在 <wbr> 的位置断开。对于你无法控制的文本，CSS 属性 overflow-wrap: anywhere 可以让长单词在任意位置断开。

阻止换行

有时你想要的恰恰相反：让“10 km”或电话号码保持在一起。有两个办法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No break</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 170px; border: 2px solid #16a34a; padding: 4px; }
    .nowrap { white-space: nowrap; }
  </style>
</head>
<body>
  <p class="narrow">The race is exactly 10&nbsp;km long, call <span class="nowrap">+1 555 0100</span> to join.</p>
</body>
</html>

  是浏览器不会在此断行的空格，所以“10”和“km”会保持在一起。white-space: nowrap 让整个 span 保持在一行。把   换成普通空格，或者去掉那个类，在这个宽度下两者都会被拆成两行。

常见错误

• 在源代码中按回车键，以为会另起一行。 HTML 中的换行符就是空格。请使用 <br>、单独的元素或 white-space: pre-line。
• 堆叠 <br><br><br> 来制造间距。 请使用段落和 margin。
• 用 <br> 拼出列表。 请使用带 <li> 的 <ul> 或 <ol>，屏幕阅读器会把它们读作列表。
• 写成 </br>。 这是无效的。请写 <br>。
• 用 innerHTML 给用户文本添加 <br>。 请改为设置 textContent，并使用 white-space: pre-line。