<br>是HTML唯一原生换行标签，仅用于语义上需断行但不构成新段落的场景；CSS的white-space、word-break等属性控制文本折行行为，不可替代<br>的语义功能。
HTML 里想让文本换行，别急着套“教程”套路——<br> 是唯一原生换行标签，其他所谓“换行方法”本质都是 CSS 控制布局或白空间行为，不是真换行。
用 <br> 强制换行：什么时候必须用它
只在语义上需要“此处断行、但不构成新段落”时才用，比如地址、诗行、签名档：
<p>北京市朝阳区建国路8号<br>SOHO现代城A座12层<br>邮编：100022</p>
- 它不产生外边距，不会像
<p>那样自带上下空隙 - 不能用在
<div>或<span>内部当“块级换行”使——它只是个行内换行符 - 滥用会导致 HTML 结构语义混乱，比如用
<br>替代列表或标题结构
CSS 的 white-space：控制文本是否折行
这个属性决定浏览器怎么处理空格、制表符和换行符，直接影响“软换行”行为：
-
white-space: normal（默认）：合并空白符，自动折行 -
white-space: nowrap：不折行，哪怕超容器宽度也横向溢出 -
white-space: pre：保留所有空白符（包括换行），但不自动折行 -
white-space: pre-wrap：保留换行和空格，同时允许自动折行——最接近“粘贴即显示原格式”的场景
例如后端返回带 \n 的描述文本，想让它按换行符显示又不溢出容器：
立即学习“前端免费学习笔记（深入）”；
<div style="white-space: pre-wrap;">第一行\n第二行\n第三行</div>
避免用 <div> 或 <p> “假装换行”
有人写多个 <div> 或 <p> 来模拟换行，这是错的：
<div>第一行</div> <div>第二行</div> <div>第三行</div>
问题在于：
- 每个
<div>默认是块级元素，自带margin-top和margin-bottom，视觉间距不可控 - 语义上它们是独立区块，不是同一段文本里的换行
- 响应式下容易出现意外断行或堆叠错位
- 屏幕阅读器会把它们读成三条独立陈述，破坏原意
word-break 和 overflow-wrap：处理长单词/URL 换行
纯英文、数字串或 URL 不含空格时，normal 模式下根本不会折行。这时得靠这两个属性：
-
word-break: break-all：粗暴断词，哪怕把“international”切成inter- national -
overflow-wrap: break-word（推荐）：只在必要时断词，优先保持单词完整；对中文无效（中文本来就能在任意字间断）
典型用法：
<code style="word-break: break-all;">https://example.com/very-long-path-with-no-spaces-at-all</code>
真正难的不是“怎么换行”，而是判断该用语义换行（<br>）、内容结构换行（<p>/<li>），还是样式控制换行（CSS 白空间 + 折词）。多数时候，你缺的不是技巧，是先想清楚这行文字在页面里到底扮演什么角色。
