零宽空格（/）在dom中生成真实文本节点，虽不可见但参与行内格式化，导致1–2px对齐偏移；需通过移除、包裹、css控制或构建时预处理规避布局干扰。
零宽空格（ / ）在DOM中会生成真实文本节点
零宽非连接符 和零宽连接符 不显示，但它们是合法的 Unicode 字符，在 HTML 解析时会被当作普通文本节点插入。一旦出现在 inline 或 inline-block 元素之间，就会像普通空格一样参与行内格式化上下文，造成不可见却可测量的间隙——尤其在按钮组、导航菜单或图标+文字组合中，可能让对齐偏移 1–2px。
常见错误现象：button 旁边加了 想“防连字”，结果按钮之间多出无法用 margin 消除的缝隙；<span>图标</span><span>文字</span> 在 Safari 中文字突然右移。
- 用浏览器开发者工具检查元素盒模型，能看到间隙来自一个宽度非零的“#text”节点，内容就是
- 该节点受父容器
font-size影响：字号越大，零宽字符占用的水平空间越明显（尽管视觉不可见） -
white-space: nowrap不能吞掉它，letter-spacing: 0对它无效，只有移除或隔离才真正解决
如何安全使用 / 而不破坏布局
零宽字符本身有用，比如控制阿拉伯语连字、Emoji 组合（??）、中英文混排断行点。关键不是禁用，而是避免让它落在行内流中“裸奔”。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 把
放进<span style="display: inline-block; font-size: 0;"></span>里，再用子元素恢复字号——它还在，但不占空间 - 在需要控制断行的位置，改用 CSS 的
word-break: keep-all或overflow-wrap: anywhere替代 - 对图标+文字结构，用
<span class="icon"></span><span class="label">文字</span>显式包裹，中间不插任何字符；间距靠gap或margin控制 - 服务端或构建时做预处理：正则替换
为注释<!-- zwnj -->（仅当它纯属占位无语义时）
调试时快速定位零宽字符干扰
它不像普通空格那样一眼可见，容易漏查。遇到“莫名偏移”又排除了 margin/padding/vertical-align 后，优先怀疑这个。
- 在开发者工具的 Elements 面板中，右键 → “Edit as HTML”，复制一段疑似区域的源码，粘贴到支持显示控制字符的编辑器（如 VS Code + 插件 “Highlight Bad Chars”）
- 执行
document.body.innerHTML.includes('\u200C')（的 Unicode）或\u200D（），快速确认是否存在 - 临时加一行 CSS：
* { outline: 1px solid red !important; }，看是否某个看不见的文本节点意外获得了 outline 尺寸
与普通空格、 的行为差异
三者都生成文本节点，但渲染逻辑不同：普通空格被折叠， 强制不换行且宽度固定，而 / 宽度为 0 但仍有“存在感”——它参与行内盒排列，影响基线对齐和 text-align 计算。
-
white-space: nowrap保留，不行 -
font-size: 0能让效果不稳定（某些字体下仍占微小宽度） - 用
element.textContent.replace(/\u200C|\u200D/g, '')可批量清理，但注意别误删 Emoji 组合所需的
零宽字符的问题不在“它有没有”，而在“它在哪”。只要不把它放在两个行内元素的夹缝里裸露出现，就基本不会引发布局错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
