角度如何删除 <span> 之间的空格？

Question

我必须说直到上周我才注意到这一点。如果你有以下 HTML

<div>
    <span>A</span>
    <span>B</span>
</div>

DEMO

它被呈现为A B。但是，如果你在 Angular 中渲染完全相同的东西，那么 A 和 B 之间的空间就会被删除。我创建了一个 Stackblitz 来演示 Angular 中的几个案例：

<h3>With normal space</h3>
<div>
  <span>A</span>
  <span>B</span>
</div>
<br>
<h3>  With &amp;ngsp;</h3>
<div >
  <span>A</span>&ngsp;
  <span>B</span>
</div>
<br>
<h3>With ngPreserveWhitespaces</h3>
<div ngPreserveWhitespaces>
  <span>A</span>
  <span>B</span>
</div>

DEMO

我尝试使用 Chrome DevTools 检查 HTML，但我仍然不明白它是如何完成的。对于所有情况，HTML/CSS 都是相同的。无论如何，这可能非常简单。有什么建议吗？

Answer 1

span 默认的 display 属性是 inline-block。这将在 span 元素之间创建额外的空间，因此我们需要通过将 font-size: 0 提供给父元素来删除它。而且你必须给你的子元素字体大小。像这里一样，我将font-size:0; 应用于父元素，即div，并将font-size:1rem; 应用于div 的子元素。

div{
  font-size: 0;
}
div>span{
  font-size:1rem;
}

<div>
	<span>A</span>
	<span>B</span>
</div>

<span id="total">X</span>
<span id="max">Y</span>