html中文字排版失效的根本原因是浏览器按规范压缩连续空白符为单个空格；需用语义标签（如、）或css（如white-space、margin）主动干预，而非依赖源码换行与空格。
HTML中文字排版失效，根本原因是浏览器会压缩所有连续空白符（换行、制表、多个空格）为单个空格——这不是bug，是规范行为。想让回车变换行、空格显形、段落有呼吸感，必须用语义或CSS主动干预。
为什么直接敲回车和空格不生效
HTML解析器按标准处理空白：源码里写10个换行+8个空格，渲染结果仍是“一个空格”。这是为了兼容早期网络带宽限制和简化布局逻辑。
- 常见错误现象：
<p>第一行↵↵↵第二行</p>渲染成“第一行 第二行”（中间仅一个空格） - 真正起作用的只有显式标签或CSS声明，编辑器里的回车只是开发时的便利，不是HTML指令
- 不要试图靠
<br>堆砌段落间距——它不带语义，也不产生默认margin，CSS难统一控制
用 <p></p> 分段 + CSS 控制呼吸感
<p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 是语义正确的段落容器，但默认样式常被重置或覆盖，导致段落贴在一起。
- 基础修复：
p { margin: 1em 0; }——1em约等于当前字体大小，符合排版惯例 - 提升可读性：
line-height: 1.6;（非固定像素值，避免缩放失真） - 移动端注意：
@media (max-width: 768px) { p { margin: 0.8em 0; } }防止小屏撑开页面 - 危险信号：如果一段文本里用了3个以上
<br>，大概率该拆成多个<p></p>或改用<ul></ul>
保留原始换行与空格的三种场景化方案
不是所有内容都适合<p></p>分段。代码、诗歌、地址、ASCII艺术等需严格保留源码格式，得选对方法。
- 纯展示型（如代码块）：
<pre class="brush:php;toolbar:false;"></pre>最简单可靠，但默认等宽字体+上下外边距，需重置：pre { font-family: inherit; margin: 0; } - 混合内容（如用户评论含换行但需响应式折行）：
white-space: pre-line;保留换行符、合并多余空格、允许边界处自动换行 - 精细控制（如歌词、签名档）：
<br>仅用于同一语义块内的强制换行，例如地址：<p>北京市朝阳区建国路1号<br>邮编：100022</p> - 避坑点：
white-space: pre;会禁用自动换行，长URL或单词可能横向溢出，务必加overflow-wrap: break-word;
竖排、对齐、间距等进阶控制靠CSS属性
HTML标签只负责结构语义，视觉排版几乎全部交给CSS。别在<p align="center"></p>这种过时写法上浪费时间。
- 水平对齐：
text-align: center;（作用于块级容器内联内容），不是align属性 - 竖排中文：
writing-mode: vertical-rl;+text-orientation: mixed;（数字/英文保持横排） - 字间距微调：
letter-spacing: 0.05em;（用em比px更适应缩放） - 首行缩进（中文习惯）：
text-indent: 2em;，注意别和padding-left混用
真正难的不是记住<pre class="brush:php;toolbar:false;"></pre>或white-space怎么写，而是每次敲下回车前问一句：这个换行是语义分段，还是视觉分行？前者用<p></p>，后者看场景选<br>或CSS。忽略这点，再多技巧也救不了混乱的结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
