[英]How does angular remove whitespaces between <span>s?
I must say that I never noticed this until last week.我必须说直到上周我才注意到这一点。 If you have the following HTML
如果您有以下 HTML
<div>
<span>A</span>
<span>B</span>
</div>
It is rendered as A B .它呈现为A B 。 However, if you render the exact same thing in Angular that space between A and B is removed.
但是,如果您在 Angular 中渲染完全相同的内容,则删除 A 和 B 之间的空间。 I've created a Stackblitz to demonstrate a couple of cases in Angular:
我创建了一个Stackblitz来演示 Angular 中的几个案例:
<h3>With normal space</h3>
<div>
<span>A</span>
<span>B</span>
</div>
<br>
<h3> With &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>
I've tried to inspect the HTML with Chrome DevTools but I still don't understand how its done.For all cases the HTML/CSS is identical.我尝试使用 Chrome DevTools 检查 HTML 但我仍然不明白它是如何完成的。对于所有情况,HTML/CSS 都是相同的。 Anyway, it's probably very simple.
无论如何,这可能非常简单。 Any suggestions?
有什么建议么?
By default display property of span is inline-block. span 的默认显示属性是 inline-block。 This will create extra space between the span elements so we need to remove that by giving
font-size: 0
to the parent element.这将在 span 元素之间创建额外的空间,因此我们需要通过将
font-size: 0
赋予父元素来删除它。 And you have to give font-size to your child elements.你必须给你的子元素字体大小。 Like here i have applied
font-size:0;
像这里我已经应用了
font-size:0;
to parent element ie div and applied font-size:1rem;
到父元素,即 div 并应用
font-size:1rem;
to children span elements of div.给孩子跨越 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.