是HTML唯一原生换行标签，仅用于语义上需断行但不构成新段落的场景；CSS的white-space、word-break等属性控制文本折行行为，不可替代的语义功能。

HTML 里想让文本换行，别急着套“教程”套路——
是唯一原生换行标签，其他所谓“换行方法”本质都是 CSS 控制布局或白空间行为，不是真换行。

用
强制换行：什么时候必须用它

只在语义上需要“此处断行、但不构成新段落”时才用，比如地址、诗行、签名档：

北京市朝阳区建国路8号
SOHO现代城A座12层
邮编：100022

• 它不产生外边距，不会像
  那样自带上下空隙
• 不能用在 或 内部当“块级换行”使——它只是个行内换行符
• 滥用会导致 HTML 结构语义混乱，比如用
替代列表或标题结构

CSS 的 white-space：控制文本是否折行

这个属性决定浏览器怎么处理空格、制表符和换行符，直接影响“软换行”行为：

立即学习“前端免费学习笔记（深入）”；

• white-space: normal（默认）：合并空白符，自动折行
• white-space: nowrap：不折行，哪怕超容器宽度也横向溢出
• white-space: pre：保留所有空白符（包括换行），但不自动折行
• white-space: pre-wrap：保留换行和空格，同时允许自动折行——最接近“粘贴即显示原格式”的场景

例如后端返回带 \n 的描述文本，想让它按换行符显示又不溢出容器：

第一行\n第二行\n第三行

避免用 或

“假装换行”

有人写多个 或

来模拟换行，这是错的：

第一行
第二行
第三行

问题在于：

• 每个 默认是块级元素，自带 margin-top 和 margin-bottom，视觉间距不可控
• 语义上它们是独立区块，不是同一段文本里的换行
• 响应式下容易出现意外断行或堆叠错位
• 屏幕阅读器会把它们读成三条独立陈述，破坏原意

word-break 和 overflow-wrap：处理长单词/URL 换行

纯英文、数字串或 URL 不含空格时，normal 模式下根本不会折行。这时得靠这两个属性：

• word-break: break-all：粗暴断词，哪怕把“international”切成 inter- national
• overflow-wrap: break-word（推荐）：只在必要时断词，优先保持单词完整；对中文无效（中文本来就能在任意字间断）

典型用法：

https://example.com/very-long-path-with-no-spaces-at-all

真正难的不是“怎么换行”，而是判断该用语义换行（
）、内容结构换行（

/
• ），还是样式控制换行（CSS 白空间 + 折词）。多数时候，你缺的不是技巧，是先想清楚这行文字在页面里到底扮演什么角色。