br标签用于语义化强制换行，适合诗歌、地址等场景；CSS通过white-space、word-break等属性提供更灵活的换行控制，适用于响应式布局。应根据需求选择：精确换行用br，整体布局用CSS，避免滥用br影响维护性。
在网页开发中，实现文本换行是常见需求。HTML 提供了 br 标签用于强制换行，而 CSS 也提供了多种控制换行的方式。两者适用场景不同，理解它们的差异有助于写出更语义化、更灵活的代码。
br 标签：简单的强制换行
br 是 HTML 中最直接的换行方式，属于无内容的自闭合标签。它表示“此处需要换行”，常用于诗歌、地址或需要精确控制换行的位置。
示例：<p>第一行内容<br>第二行内容<br>第三行内容</p>
渲染效果为：
第一行内容
第二行内容
第三行内容
立即学习“前端免费学习笔记（深入）”；
特点：- 语义明确：表示物理换行
- 无需额外样式即可生效
- 不适合大段文本布局控制，过度使用影响可维护性
CSS 控制换行：更灵活的布局方式
CSS 提供了多种处理换行的属性，适用于不同场景，比如自动换行、禁止换行、断词等，更适合响应式设计。
常用 CSS 换行相关属性：-
white-space：控制空白符和换行的处理方式
-
normal：合并空白，自动换行（默认） -
nowrap：不换行，内容在一行显示 -
pre：保留空白和换行，类似 pre 标签 -
pre-wrap：保留空白和换行，允许自动换行 -
pre-line：合并空白，保留换行符换行
-
-
word-break：控制单词内是否断行
-
break-all：允许在任意字符间断行（适合中文） -
keep-all：不允许在单词内断行（适合中日韩文本）
-
-
overflow-wrap（原 word-wrap）
-
break-word：长单词或 URL 超出容器时自动断行
-
p {
white-space: nowrap;
}
示例：允许长单词断行
p {
overflow-wrap: break-word;
}
br 与 CSS 换行的对比总结
- 语义性：br 是语义化的“换行”标签；CSS 换行属于表现层控制
- 灵活性：CSS 更适合动态内容和响应式布局
- 维护性：用 CSS 控制换行更容易统一管理样式
-
使用建议：
- 需要精确换行（如地址、诗句）用 br
- 控制段落或容器内的换行行为，优先使用 CSS
- 避免用多个 br 实现“空行”效果，应使用 margin 或 padding
