段落内文本默认自动换行，由块级元素特性和 white-space: normal 决定；超长无空格字符串需用 overflow-wrap: break-word；p 标签间默认 margin 实现间距，勿滥用 br；语义化段落应按逻辑而非换行符划分。
段落内文本默认自动换行，不依赖
浏览器对 <p></p> 标签内的纯文本会根据容器宽度自动折行，无需插入 <br>。这是由其块级元素特性和默认 white-space: normal 行为决定的。只要文本中没有超长无空格字符串（如一长串 URL 或 Base64），就基本不会溢出。
常见错误是手动在段落里塞一堆 <br> 来“控制换行”，结果导致：
- 响应式断点下换行位置错乱
- 屏幕阅读器读出大量“换行”语音提示
- CSS 修改 line-height 或 font-size 后排版崩坏
超长单词/URL 溢出时用 overflow-wrap: break-word
当段落中出现 ThisIsAnExtremelyLongWordWithoutSpaces 或类似 URL 时，<p></p> 默认不会断开它，而是横向溢出容器。
修复方式是在 CSS 中设置：
p {
overflow-wrap: break-word;
/* 或旧写法 word-wrap: break-word; */
}
注意：
- 不要只对个别 <p></p> 单独加，建议全局重置或通过 class 控制
- overflow-wrap 是标准属性，word-wrap 是旧别名，两者目前都支持但优先用前者
- 避免用 white-space: pre-wrap 替代，它会强制保留所有换行符和空格，破坏语义排版
p 标签之间有默认 margin，不是靠
分隔段落
<p></p> 是块级元素，浏览器默认给它上下各约 1em 的 margin，所以连续写：
<p>第一段</p> <p>第二段</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a> <p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p> </div> <a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
天然就有视觉间距。误用 <br> 叠加在段落之间，比如：
<p>第一段</p><br><p>第二段</p>
会导致：
- 多余的空白高度（<br> + 默认 margin）
- 无法用 CSS 统一控制段间距
- 语义混乱：两个逻辑段落被当成一个段落里的换行
需要保留原始换行格式时，别硬套 p 标签
如果内容本身来自用户输入、日志、诗歌或地址（含明确回车），直接用 <p></p> 会丢失换行——因为 white-space: normal 会忽略源码中的换行符。
此时更合理的做法是：
- 用 <pre class="brush:php;toolbar:false;"></pre> + white-space: pre-wrap，兼顾保留换行与自动折行
- 或对文本做预处理：把 \n 替换为 <br>，再包裹进 <p></p>
- 避免给 <p></p> 直接设 white-space: pre，它会禁用自动换行，长行仍会溢出
真正容易被忽略的是：段落的语义边界必须和内容逻辑一致。一个 <p></p> 应该是一个完整信息单元，而不是“我刚好在这里按了回车”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
