HTML中英文混排空格塌陷是规范行为而非bug，浏览器会将连续空白符合并为单个空格；应优先使用 、 、 等语义化空格，并配合white-space: pre-wrap处理用户输入内容。

中英文混排空格塌陷是HTML默认行为，不是bug

浏览器会把连续的普通空格、制表符、换行全部合并成一个空格，这是HTML规范明确规定的。所以你在源码里写“今天天气很好。Hello world.”，中间敲了5个空格，渲染出来还是紧挨着的——今天天气很好。Hello world.。这不是渲染错误，而是解析阶段就压缩掉了。想靠多敲空格来控制间距，从第一步就走不通。

用 或 替代普通空格要分场景

语义上不可分割的位置（如数字与单位、人名与职称）必须用 ；而中英文字符间需要视觉微调时， （四分之一空格）或 （八分之一空格）比 更自然，避免生硬的“卡顿感”：

• 100 px：防止单位换行，语义正确
• HTML CSS JS：比HTML CSS JS更符合中英文混排节奏
• 张三 博士：避免“张三”独占行尾，“博士”被挤到下一行

注意： 会被屏幕阅读器读作“空格”，连用多个会干扰无障碍体验；复制粘贴到Word或终端时还可能丢失或转义为乱码。

white-space: pre-wrap 是跨段落混排的底线配置

如果内容来自用户输入、API返回或日志，本身含换行和多空格，仅靠实体字符不够。必须给容器加white-space: pre-wrap：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 它保留所有原始空格和换行，同时允许在容器边界自动折行，不撑宽父元素
• 别用white-space: pre：禁用折行，长URL或无空格英文直接横向溢出
• 别用white-space: pre-line：会合并连续空格，回到塌陷原点
• React/Vue中建议设在包裹
  上，而非直接操作v-html或dangerouslySetInnerHTML

  真正难的是baseline对齐和标点悬挂，空格只是表象

  中英文混排间隙不均，常被归咎于空格，但根源往往是字体度量和排版规则错位：

  • 中文默认line-height偏小，导致文字“压在一起”，尤其小字号下；设line-height: 1.5比盲目加空格更治本
  • 英文标点（如.、,）和中文标点（如。、，）基线不一致，浏览器按西文逻辑处理，造成视觉下沉
  • 全角标点必须用“”、，、。，不能用" "、,、.，否则lang属性失效，断行和字体回退全乱

  空格问题能靠实体和CSS快速缓解，但baseline、标点悬挂、避头尾这些，得靠font-feature-settings、text-rendering: optimizeSpeed、甚至专用排版库才能系统解决。

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