01. HTML 换行的基本概念
概念与场景
在网页文本呈现中，HTML 换行的含义分为段落分隔与内联换行两种，二者在语义与排版上有明显差异。理解这一点对于后续选择 br 标签还是 CSS 解决方案至关重要。段落级换行通常通过 p 标签来实现，而强制换行则需要使用专门的标记或样式来触发。
为了实现可维护的排版，开发者应清晰区分文本块的结构与展示行为。文本块的结构化有助于屏幕阅读器的导航，也便于搜索引擎理解页面组织。浏览器在遇到换行时，会依据标签与样式决定换行时机与空白高度。
这是第一行文本
这是第二行文本在上面的示例中，br 标签实现了内联文本的强制换行，但它并不会增加段落层级，仅改变视觉呈现。若要组织成独立段落，应该使用 <p> 或其他语义标签。
02. br 标签的使用场景与局限
使用场景
br 标签适用于需要强制换行且不想引入段落边距的文本，如地址信息、诗句排布或表单字段中的多行文本。它的存在使开发者能够在不改变结构的前提下控制换行位点。
在内容中当你希望紧凑地展示多行信息，而不希望浏览器自动新增段落间距时，使用 br是一个直观选择。此时，语义不变，只是呈现上多了一条换行线。
地址：123 主街
示例城， 99999另一方面，对于需要可访问性与语义性保障的文本，应尽量避免大量使用 br 来代替段落结构；这会影响屏幕阅读器的导航与语义解析。
局限性
大量的 br 嵌入文本会使文档变得不易维护，且在不同设备上呈现可能造成不一致的断行行为。这也是为什么很多前端实践将换行的控制交给 CSS，而不是依赖大量的 br。
为了实现更好的适配性，开发者应优先考虑分段语义化的标签，如将属于不同语义单位的文本拆分到不同的 p 标签中，在需要时再通过 CSS 控制间距与换行行为。
03. CSS 实现换行的常见方式
常用方法
CSS 提供了多种换行与断行的控制方式，其中 white-space 属性用于定义空白字符的处理、换行与文本的呈现方式。
p { white-space: normal; }此外，overflow-wrap 或 word-break 能在单词边界或字符边界处实现自动换行，提升长单词在窄屏上的可读性。
p { overflow-wrap: break-word; word-break: break-word; }对于需要保留文本中的换行标记的场景，white-space: pre-wrap 能同时保持换行与文本的自动换行，是兼具可观览性与可读性的常用选项。
pre, code { white-space: pre-wrap; }常见用途与注意点
如果你的文本来自后端或用户输入，优先考虑 CSS 控制断行，以便在不同设备下获得一致的体验。同时，避免把换行逻辑硬写在 HTML，这有利于维护与无障碍访问。
在需要保留空格和换行的文本块中，pre-wrap 是一个高效方案，既保留原始格式，又允许自动换行以适应窄屏。
04. 最佳实践：何时使用 br、何时使用 CSS 解决换行
实践要点
在实际开发中，场景判断决定是否使用 br：当文本需要被严格按点位换行，且不影响段落结构时，使用 br 更直观；若要实现自由换行和可维护性，应尽量依赖 CSS。
对于段落之间的分割，应该使用语义化的 HTML结构，例如 <p> 标签来表示段落，而不是通过堆叠大量的 br 来制造空白。
<p>这是一个段落。</p>
<p>这是另一个段落。</p>在响应式设计中，通过 CSS 控制断行比硬编码换行更具弹性。使用媒体查询和合适的 white-space 设置，可以在不同屏幕宽度下保持良好的文本可读性。
/* 响应式换行控制示例 */
@media (max-width: 600px) {
p { white-space: pre-wrap; }
}
总结性地说，HTML 换行怎么实现，应以语义优先、可访问性为先，通过 br 作为极少数的强制换行场景，更多依赖 CSS 的换行与文本处理能力来实现稳健的排版。
