段落内文字自动换行是因为<p>是块级元素且默认white-space: normal，浏览器压缩连续空白并按容器边界折行；超长无空格字符串需用overflow-wrap: break-word强制断行。
段落内文字为什么自动换行？
因为 <p> 是块级元素，且默认 white-space: normal —— 浏览器会把连续空白（空格、制表符、换行符）压缩成一个空格，并在容器边界处折行。你不需要写任何换行标签，只要文本里有自然空格或标点，它就会“呼吸式”断行。
常见错误现象：
- 源码里敲了回车，渲染出来还是连成一坨
- 给
<p>里硬塞一堆<br>，结果小屏幕下换行错位 - 用
white-space: pre强行保留换行，却导致长 URL 溢出容器
真正要注意的是：超长无空格字符串（比如 https://example.com/very-long-path-with-no-hyphens-or-spaces）不会自动断开，必须靠 CSS 控制。
超长单词或 URL 溢出怎么修？
加 overflow-wrap: break-word 就行，别只修个别 <p>，建议全局重置或统一加 class：
立即学习“前端免费学习笔记（深入）”；
p {
overflow-wrap: break-word;
}
注意：
-
word-wrap: break-word是旧写法，兼容性好但已非标准，优先用overflow-wrap - 别用
white-space: pre-wrap替代——它会保留所有原始换行符和空格，破坏语义 - 如果内容来自用户输入（如评论），预处理时把
\n换成<br>更可控，而不是依赖 CSS
什么时候该用 <br> 而不是 <p>？
只在「同一语义单元内需强制换行」时用 <br>，比如地址、诗歌、表单提示文案。它不产生新段落，也不带 margin。
典型场景：
-
<p>北京市朝阳区<br>建国路8号</p>—— 同一地址的两行物理信息 -
<p>床前明月光，<br>疑是地上霜。</p>—— 诗句分行，但语义上是一段 - 避免：
<p>第一句。<br>第二句。</p>→ 这其实是两个独立陈述，该拆成两个<p>
滥用 <br> 的后果：读屏软件读作“换行、换行、换行”，SEO 无法识别段落结构，响应式改版时还得逐个删 <br>。
段落间距是靠什么实现的？
靠浏览器默认给 <p> 设的 margin-top 和 margin-bottom（通常是 1em）。不是靠 <br>，也不是靠空行。
所以：
- 连续写
<p>A</p><p>B</p>，天然就有间距；中间插<br>反而多出一行空白 - 想统一调小段间距？改 CSS：
p { margin: 0.75em 0; }，别手动删<p> - 需要首段无上边距、末段无下边距？用 :first-child/:last-child 选择器，而不是靠 JS 动态删 class
最容易被忽略的是：段落的边界必须对齐内容逻辑，不是编辑器里的回车次数。一个 <p> 应该回答“这句话是否能独立表达一个完整意思”，而不是“我在这里按了几次回车”。
