在销售页等长文案中，若需将同一思想拆分为多行显示（非诗歌或地址），应优先使用 <br> 配合 CSS 的 line-height 控制行间距，而非多个 <p> 标签或冗余 <br><br>；此举既符合 HTML 语义规范，又兼顾可访问性与样式可控性。
在销售页等长文案中，若需将同一思想拆分为多行显示（非诗歌或地址），应优先使用 `
` 配合 css 的 `line-height` 控制行间距，而非多个 `
` 标签或冗余 `
`；此举既符合 html 语义规范，又兼顾可访问性与样式可控性。
当文案以“一句一行”形式呈现（如：“We get it…”、“Finding an X that understands X is difficult.”），其核心诉求是：视觉分行 ≠ 语义分段。这些句子共同构成一个连贯的修辞单元（例如设问引导、情绪递进），逻辑上属于同一段落，不应被拆解为多个 <p> 元素——因为每个 <p> 在语义上代表一个独立的段落（paragraph），屏幕阅读器会为其添加停顿、甚至朗读“段落结束”，破坏语义连贯性，也影响 SEO 和结构化数据解析。
正确做法是：单个 <p> 包裹全部内容，用单个 <br> 实现换行，并通过 CSS 精确控制行间距。
MDN 明确指出：<br> 适用于“行划分具有意义”的场景（如诗歌、地址、歌词），而销售文案中的分行常承担节奏控制、呼吸感营造、重点强调等功能——这正是“行划分有意义”的典型体现。关键在于避免滥用（如用 <br> 替代段落结构），而非禁用。
✅ 推荐写法：
<p> We get it…<br> Finding an X that understands X is difficult.<br> It seems like they all X.<br> So, how are you supposed to decide?<br> That's a loaded question, but what we can tell you is this: </p>
配合 CSS 统一控制垂直节奏：
p {
line-height: 2.4; /* 或 2.4em / 1.8rem，推荐无单位数值，继承更可靠 */
margin: 0; /* 移除默认段落外边距，避免与 line-height 叠加导致过大的空白 */
}⚠️ 注意事项：
- 不要使用 <br><br> 模拟间距：语义混乱，且无法通过 CSS 精细调控；
- 避免为每行单独包裹 <p>：虽便于 CSS 间距控制（如 margin-bottom），但违背语义——每个 <p> 会被辅助技术识别为独立段落，打断用户对内容整体性的理解；
- 若需首行缩进或特殊对齐，仍应在 <p> 层级统一设置（如 text-indent、text-align），而非依赖 <br> 的位置特性；
- 在响应式设计中，line-height 比固定像素间距更健壮，能随字体大小自适应缩放。
总结：语义优先不等于放弃表现力。<br> 在此处是合法、必要且可访问的工具；真正的语义风险，源于用表现替代结构（如用 <br> 分隔不同主题段落），而非在合理语境中控制行内节奏。
