长文本排版必须依靠语义化标签（如<p>）、精准CSS控制（如margin-block、line-height、text-indent）和可访问性意识协同实现；滥用<br>破坏段落语义，导致屏幕阅读器误读、SEO降权、响应式失效，而嵌套<div>进<p>则违反HTML规范引发结构错乱。
长文本排版不是“加几个
就行”，而是靠语义结构 + CSS 控制 + 可访问性意识三者协同。用错标签或忽略默认行为，反而会让屏幕阅读器卡住、SEO 降权、移动端文字挤成一团。
为什么不能用
代替
分段
很多开发者看到换行就本能敲 <br>，结果一段 500 字全塞在一个 <p> 里，只靠 <br> 拆行——这破坏了段落的语义边界。浏览器和辅助设备会把整块内容当做一个逻辑单元朗读，用户无法跳过无关段落；搜索引擎也难以提取关键信息点。
-
<br>仅用于同一段内强制换行（如地址、诗行），不是段落分隔符 - 每个
<p>应承载一个完整语义单元：比如“问题描述”“解决步骤”“注意事项”各为一段 - 嵌套
<div>或其他块级元素进<p>是非法 HTML，部分浏览器会自动闭合<p>导致结构错乱
如何用CSS控制
的呼吸感
仅靠 <p> 默认上下 margin 不够稳定，尤其在不同浏览器或重置样式后容易消失。必须显式设置垂直节奏。
- 优先用
margin-block（现代写法）或margin-top/margin-bottom统一控制段间距，避免单设margin-bottom导致首段顶边无空隙 -
line-height建议设为无单位数值（如1.6），它会继承父级字体大小，比固定像素值更适应响应式场景 - 首行缩进用
text-indent: 2em，但注意：em基于当前字体大小，若段落内含<strong>等变字号元素，缩进仍以父级为准，不会错乱 - 禁用
padding替代段间距——它增加的是段落内部“墙距”，不是段与段之间的“路距”
超长无空格文本（如 base64、路径、JSON 片段）怎么不溢出容器
这类内容常出现在文档页、API 说明或日志展示中，<p> 默认不会换行，直接撑破容器宽度。
立即学习“前端免费学习笔记（深入）”；
- 对包裹该类文本的
<p>或其子容器加word-break: break-word（兼容老浏览器）或更精准的overflow-wrap: break-word - 若需保留原始格式（如代码块），应改用
<pre><code>组合，并配white-space: pre-wrap - 避免全局给
p设word-break: break-all——它会把英文单词中间硬拆，损害可读性
语义层级断裂是隐形排版杀手
标题跳级、<section> 缺 <h2>、<main> 内没标题，这些看似不影响显示的问题，会让 AT（辅助技术）用户迷失上下文，也会让 Lighthouse SEO 审计直接扣分。
- 每个
<section>或<article>必须以一个标题开始（<h2>或更高级），否则语义链断裂 -
<main>不是装饰性容器，它代表页面核心内容起点，里面至少有一个<h1>或<h2> - 用
<aside>包裹补充说明时，别忘了加aria-label或role="complementary"，否则屏幕阅读器可能跳过
真正难的不是写对一个 <p>，而是在整篇文档里保持段落粒度一致、标题层级连贯、超长内容可控、语义标签不偷懒——这些细节堆叠起来，才决定用户是顺畅读完，还是中途关掉页面。
