包含较小字号跨度的段落的行高不正确

line-height 在段落中填充 span ,当 跨度 比段落的小。

我的角度应用程序有一个可编辑的 div 元素,我使用 Froala editor 线条高度 在段落中。

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>

只要字体大小在 跨度 20px ),行高度正确缩放。但是,当 跨度 如果行的高度小于其段落的高度,则行的高度不会按应有的比例缩放。这个问题可以从中看出 this jsfiddle .

如果我设置 display: inline-block 上 跨度 元素时,行高度会正确缩放,但显示设置会弄乱编辑器中的环绕。否则,我能想到的唯一解决方法是在检索段落内的字体大小之后,使用数据绑定以像素为单位设置行高。有没有更简单的方法来强制调整线的高度 跨度 字体较小的元素?