如何去除code元素内部span标签之间的空格？

问题根源 #

你遇到的空格问题是因为HTML中<span>元素之间的换行、缩进等空白字符会被浏览器解析为行内元素间的空格。设置white-space: pre仅能保留span内部的空白，无法消除span之间的空白。

解决方案 #

方案1：移除HTML中span元素间的空白

直接修改HTML结构，删除<code>标签内span元素之间的所有换行、缩进和空格，让它们紧密排列：

<div class="highlight">
  <pre>
    <code class="code">
      <span>const </span>root<span>=</span>ReactDOM<span>.</span><span>createRoot</span><span>(</span>document<span>.</span><span>getElementById</span><span>(</span><span>'root'</span><span>)</span><span>)</span><span>;</span>root<span>.</span><span>render</span><span>(</span><span><span><span><<</span>h1</span><span>></span></span><span>Hello, World!</span><span><span><span></<</span>h1</span><span>></span></span><span>)</span><span>;</span>
    </code>
  </pre>
</div>

这种方式最直接，能彻底消除不必要的空格。

方案2：使用CSS消除行内元素间的空白

如果不想修改HTML结构，可以通过CSS技巧折叠span之间的空白：

.highlight {
  background: #eeffcc;
  border: 1px solid #e1e4e5;
  margin: 0;
  padding: 0;
  overflow: auto;
  tab-size: 1.5em;
}

pre {
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  margin: 0;
  padding: 12px;
  display: block;
  overflow: auto;
  word-break: break-all;
}

/* 新增以下CSS */
.code {
  font-size: 0; /* 折叠行内元素间的空白 */
}

.code span {
  font-size: 12px; /* 恢复字体大小 */
  white-space: pre; /* 保留span内部的空格（如"const "后的空格） */
}

原理是通过将父元素字体大小设为0，让浏览器忽略行内元素间的空白，再为span恢复正常字体大小。white-space: pre确保span内部的空格被正确保留。

方案3：使用flex布局

另一种CSS方案是将code元素设为flex容器，让span元素紧密排列：

.code {
  display: flex;
  flex-wrap: nowrap; /* 保持代码不换行，与pre的white-space: nowrap一致 */
}

这种方式也能消除span之间的空白，无需调整字体大小，需确保flex布局不影响代码正常显示。

内容的提问来源于stack exchange，提问作者ilikhachev42