html - 对于包含较小字体大小的跨度的段落,行高不正确

line-height中的字体大小小于段落的字体大小时,我在用span填充的段落中的span样式有问题。

我的Angular应用程序具有可编辑的div元素,并且我使用Froala editor 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中的字体大小小于其段落的字体大小时,行高不会按比例缩放。该问题可以在 this jsfiddle 中看到。

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

最佳答案

用这个小提琴深入了解答案-
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>

干杯,
高拉夫