Question

当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元素？

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>

干杯，高拉夫

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

1 个答案: