angular如何去除<span>s之間的空格？</span>

Question

我必須說直到上周我才注意到這一點。 如果您有以下 HTML

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

演示

它呈現為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>

演示

我嘗試使用 Chrome DevTools 檢查 HTML 但我仍然不明白它是如何完成的。對於所有情況，HTML/CSS 都是相同的。 無論如何，這可能非常簡單。 有什么建議么？

Answer 1

span 的默認顯示屬性是 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>