html中空格换行在解析时被压缩为单空格，需用 、css或语义标签控制；用于无语义换行，等块级标签兼具语义与换行；inline-block间隙源于空白符，可用flex/gap解决；动态内容换行需white-space或转换。

HTML源码里的空格和换行，浏览器根本不会照单全收——它们在解析阶段就被统一压成一个空格，DOM里早已没了原始结构。想让格式“按你写的来”，得清楚什么时候该用语义标签、什么时候靠CSS控制、什么时候必须手动插入字符。

空格显示：别指望敲空格就能留出间距

连续敲多个空格、Tab或换行，最终只显示一个空格。这是HTML解析器的默认行为，不可逆。

• 需要两个以上可见空格时，用 （非断行空格）代替普通空格，比如“100  kg”能确保单位紧贴数字
• 纯视觉对齐不用空格堆砌，改用CSS的text-indent、padding或margin

• 或white-space: pre不能“恢复”已丢失的空格，只对DOM中还存在的空白符起作用

换行显示：区分语义换行和视觉换行

源码里回车 ≠ 页面上换行。真正起效的换行方式有三类，用途完全不同：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 
  ：行内强制换行，适合地址、诗歌等需精确控制位置的场景，不带语义

• 、
  等块级标签：天然换行+语义化，利于SEO和屏幕阅读器
• white-space: pre-line：最常用，保留文本中的\n并换行，同时合并多余空格，适合用户评论、富文本内容

inline-block元素间的缝隙：其实是空格字符在作怪

两个display: inline-block的

之间换行，会被当成一个空格字符参与布局——它有字体大小、有宽度，但检查元素时看不到任何margin。

• 去掉HTML源码中标签之间的换行和空格，写成
• 给父容器设font-size: 0，子元素再单独设字体大小
• 现代方案优先用display: flex或grid，配合gap控制间距，彻底绕过这个问题

动态内容中的换行：JS传入的\n必须被正确识别

后端返回的字符串如果含\n，前端用textContent赋值后，必须配white-space: pre-line才生效；若用innerHTML，则要先替换成
。

• 安全推荐：element.textContent = str; element.style.whiteSpace = 'pre-line';
• 避免innerHTML直接拼接未过滤的内容，有XSS风险
• Vue/React中，v-html或dangerouslySetInnerHTML同理，需确保换行符已转义或替换

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！