br标签用于HTML中强制换行，适合静态内容如诗文地址；CSS通过white-space、word-break等属性实现更灵活的响应式换行控制，推荐语义换行用br，排版适应用CSS。
在网页开发中，实现文本换行是基本需求。HTML 提供了 br 标签用于强制换行，而 CSS 也提供了多种控制换行的方式。两者各有适用场景，下面详细介绍 br 标签的用法，并与 CSS 换行方法进行对比。
br 标签的基本用法
br 是 HTML 中的换行标签，属于自闭合标签，不需要闭合。它会让文本在该位置强制换到下一行。
例如：第一行内容
第二行内容
第三行内容
立即学习“前端免费学习笔记（深入）”；
渲染效果为：第一行内容
第二行内容
第三行内容
立即学习“前端免费学习笔记（深入）”；
特点：- 简单直接，适合少量文本内的手动换行
- 语义上表示“换行”，但不包含结构意义
- 常用于地址、诗文、联系信息等需要保留格式的场景
CSS 控制换行的常用方法
相比 br 标签的“硬换行”，CSS 提供更灵活、可维护的换行控制方式，尤其适用于动态内容或响应式布局。
常见 CSS 换行属性：-
white-space：控制空白符和换行的处理方式
取值如normal（忽略换行）、pre（保留空格和换行）、pre-wrap（保留换行，允许折行）等 -
word-break：控制单词内部是否断行
如break-all允许在任意字符间断行，适合长字符串防溢出 -
overflow-wrap（或 word-wrap）：
设置为break-word可在必要时将长单词换行
br 标签与 CSS 换行的对比
使用场景差异：- br 标签适合静态内容中的明确换行，比如诗句、地址信息
- CSS 换行更适合动态内容、响应式设计，避免在 HTML 中插入过多结构无关标签
- 大量使用 br 标签会使 HTML 结构混乱，不利于后期修改
- CSS 方式将样式与结构分离，更符合现代前端开发规范
- br 标签在不同屏幕下始终强制换行，可能导致布局断裂
- CSS 的 white-space 或 overflow-wrap 能根据容器自动调整，更智能
何时使用 br 标签，何时用 CSS
推荐原则：- 如果换行是内容语义的一部分（如诗歌、联系信息），可用 br 标签
- 如果换行是为了排版适应或防止溢出，应优先使用 CSS
- 避免用 br 实现布局间距，应使用 margin 或 padding
基本上就这些。br 标签简单有效，但不宜滥用。结合 CSS 的换行控制，能写出更清晰、更灵活的页面结构。合理选择方式，才能兼顾可读性与维护性。
