illegalCreed

中文

English

中文

English

Appearance

wbr/br 与空白折叠 ​

基于 HTML Living Standard · 核于 2026-06

速查 ​

  • <br>：强制换行，仅用于「换行本身是内容」的场景（诗歌、地址、签名）——别拿它分隔段落
  • <wbr>：建议断点（word break opportunity），浏览器可选在此换行，且不加连字符；治长 URL / 长标识符撑破容器
  • &shy;（软连字符）：也是可选断点，但断开时会显示连字符——适合需要连字符的长词
  • 空白折叠：源码里连续的空格 / 制表符 / 换行默认合并成一个空格，行首行尾空白被去除
  • &nbsp;：不折叠、不可断的空格（让「5 MB」不被拆到两行）
  • <pre>：原样保留空白与换行（等宽字体），适合代码块 / ASCII 图
  • CSS white-space：normal（默认折叠）/ pre（保留）/ nowrap（不换行）/ pre-wrap（保留 + 换行）/ pre-line（仅保留换行）
  • CSS 配套：overflow-wrap: break-word、word-break、hyphens: auto——长文本换行的主力，<wbr> 是精准补充

一、空白折叠：HTML 的默认行为 ​

写 HTML 时一个反直觉但关键的规则：源码里的「空白」默认会被折叠。连续的空格、制表符、换行符会被合并成一个空格，每行的行首 / 行尾空白会被丢弃。所以下面三种写法渲染结果完全一样：

html
<p>你好     世界</p>
<p>你好
   世界</p>
<p>你好	世界</p>
<!-- 都渲染成：你好 世界 -->

这意味着：你不能靠在源码里敲多个空格或回车来排版——想要多个空格、想要换行、想要缩进，都得用专门的手段（下文的 &nbsp; / <br> / CSS）。

二、<br>：强制换行 ​

<br> 是空元素（无结束标签），表示一个强制换行。它只该用在「换行本身就是内容」的地方——典型是诗歌、邮寄地址、签名块：

html
<p>
  北京市海淀区<br />
  中关村大街 1 号<br />
  100080
</p>

别用 <br> 分隔段落

最常见的误用是 <br><br> 当「段落间距」：

html
<!-- 错误：语义上这是一个段落里硬塞两次换行 -->
<p>第一段。<br /><br />第二段。</p>

<!-- 正确：两个独立段落 -->
<p>第一段。</p>
<p>第二段。</p>

段落是有语义的结构单元（屏幕阅读器可按段导航、CSS 可统一控制段间距），<br><br> 只是「视觉上空了一行」，没有任何语义。段落分隔永远用 <p>。

三、<wbr>：建议性断点 ​

<wbr>（word break opportunity）也是空元素，但它和 <br> 相反：<br> 强制换行，<wbr> 只是告诉浏览器「这里可以换行」——换不换由浏览器按容器宽度决定，而且断开时不会插入连字符。

它专门解决「长到撑破容器、又无法自然换行」的内容——长 URL、长标识符、超长复合词：

html
<!-- 长 URL：在路径分隔处给可选断点 -->
<p>https://example.com<wbr />/very<wbr />/deep<wbr />/nested<wbr />/path</p>

<!-- 长标识符 -->
<code>my<wbr />_very<wbr />_long<wbr />_variable<wbr />_name</code>

没有 <wbr> 时，这种「中间没有空格」的长串会作为一个整体，要么撑破布局、要么触发横向滚动条。<wbr> 给了浏览器「实在放不下就在这儿断」的许可。

<wbr> 等价于 Unicode 的零宽空格 U+200B，但它是「合法 HTML 标签」而非裸字符，更清晰可控；它不影响双向文字排序、不加连字符。

四、<wbr> vs &shy;（软连字符） ​

两者都是「可选断点」，唯一区别是断开时是否显示连字符：

<wbr>&shy;（软连字符）
行为可选断点可选断点
断开时不显示连字符显示连字符 -
适合URL、代码标识符需要连字符的长单词
html
<p>Fernstraßen<wbr />bau<wbr />gesetz</p>   <!-- 断开处无连字符 -->
<p>Fernstraßen&shy;bau&shy;gesetz</p>       <!-- 断开处显示连字符 -->

URL / 代码用 <wbr>（加连字符反而会让人误以为是路径的一部分），自然语言长词用 &shy;。

五、<pre>：原样保留空白 ​

当你需要保留源码里的空白与换行时（代码块、ASCII 艺术、固定格式文本），用 <pre>——它默认以等宽字体渲染，且完整保留所有空白字符：

html
<pre>
function add(a, b) {
  return a + b;       // 缩进和空格都被保留
}
</pre>

<pre> 常和 <code> 搭配表示代码块（见 行内语义页）：<pre><code>…</code></pre>。注意 <pre> 内的换行是真实的，所以起始 / 结束标签紧贴内容书写，避免多出空行。

六、CSS white-space：精细控制 ​

折叠行为最终由 CSS white-space 属性控制，HTML 的默认值相当于 normal，<pre> 相当于 pre：

值折叠空白折叠换行自动换行
normal（默认）是是是
nowrap是是否（强制单行）
pre否否否
pre-wrap否否是
pre-line是否是
css
.code-block { white-space: pre-wrap; }   /* 保留空白和换行，但仍会自动换行 */
.single-line { white-space: nowrap; }    /* 强制不换行（配合 overflow 截断） */

七、&nbsp; 与长文本换行的 CSS 主力 ​

&nbsp;：不可断空格 ​

&nbsp;（non-breaking space）是一个既不折叠、也不会在此处断行的空格——用于「不希望被拆到两行」的相邻内容：

html
<p>文件大小：5&nbsp;MB</p>       <!-- 「5」和「MB」始终在同一行 -->
<p>版本&nbsp;2.0&nbsp;已发布</p>

长文本换行：CSS 才是主力 ​

真正成片处理长文本溢出，靠的是 CSS（<wbr> 是「精准点位」的补充）：

css
.text {
  overflow-wrap: break-word;  /* 单词太长放不下时，允许在单词内换行 */
  word-break: break-all;      /* 更激进：任意字符间都可断（慎用于英文） */
  hyphens: auto;              /* 自动在合适处加连字符断词（需配合 lang） */
}

实践组合：容器宽度受限的正文加 overflow-wrap: break-word 兜底，对个别已知的长 URL / 标识符再用 <wbr> 指定理想断点。

小结 ​

HTML 默认折叠空白，所以排版不能靠敲空格 / 回车：换行本身是内容时用 <br>（限诗歌 / 地址 / 签名），段落分隔永远用 <p>；长串撑破布局时用 <wbr> 给可选断点（需连字符则用 &shy;），保留原样格式用 <pre>，成片长文本换行交给 CSS overflow-wrap / word-break / hyphens。

至此本叶六个深度页走完——从强调重要、行内语义、超链接安全，到列表、国际化、空白换行。需要速查时，回到 参考 页查表。