对于包含较小字体跨度的段落，行高不正确

Question

当span中的字体大小小于用span填充的段落中的line-height样式时，我遇到了问题。

我的Angular应用程序有一个可编辑的div元素，我使用Froala编辑器API命令来允许格式化。我添加了自己的自定义命令来修改段落中的line-height。

CSS为编辑器设置默认的字体大小和行高：

div {
font-size: 20px;
line-spacing: 1.25;
}

初始标记是这样的：

<div>
<p>Some long text that wraps here...</p>
<p>Some long text that wraps here...</p>
<p>Some long text that wraps here...</p>
</div>

使用编辑器设置字体大小和行高后，标记变为：

<div>
<p style="line-height: 1;"><span>Some long text that wraps here...</span></p>
<p style="line-height: 1;"><span style="font-size: 8px;">Some long text that wraps here...</span></p>
<p style="line-height: 1;"><span style="font-size: 40px;">Some long text that wraps here...</span></p>
</div>

只要span中的字体大小等于或大于段落的字体大小(在本例中为20px(，行高就可以正确缩放。然而，当span中的字体大小小于其段落的字体大小时，行高不会按应有的比例缩放。这个问题可以在这个jsfiddle中看到。

如果我在span元素上设置了display: inline-block，则线的高度会正确缩放，但该显示设置会打乱编辑器中的换行。否则，我能想到的唯一解决方法是在检索段落内部的字体大小后，使用数据绑定以像素单位设置行高。有没有一种更简单的方法可以强制行高调整为字体较小的span元素？

Answer 1

用这个小提琴深入理解答案-https://jsfiddle.net/gbrn58jd/

它展示了我们如何减少字体大小跨度，或者通过给修改后的跨度赋予任何类并将其保留在一个块中。

<div>
<h3>
Default font size: 20px, Line spacing: OK
</h3>
<p>Lorem ipsum dolor sit amet
</p>
<hr/>
<h3>
Font size: 8px, Line spacing: Too large
</h3>
<p><span class="class1">Aenean ut orci vel massa suscipit pulvinar.</span></p>
<hr/>
<h3>
Font size: 32px, Line spacing: OK
</h3>
<p><span class="class2">Nulla sollicitudin. </span></p>
<hr/>
<h3>
Font size: 48px, Line spacing: OK
</h3>
<p><span class="class3">Nulla sollicitudin. </span></p>
</div>

干杯，Gaurav