【发布时间】：2019-12-17 21:01:37
【问题描述】：
当span 中的字体大小小于该段落的字体大小时，我在用span 填充的段落中遇到line-height 样式的问题。
我的 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 中看到。
如果我在span 元素上设置display: inline-block，行高会正确缩放，但显示设置会打乱编辑器中的换行。否则，我能想到的唯一解决方法是在检索段落内的字体大小后，使用数据绑定以像素单位设置行高。有没有更简单的方法来强制行高调整为具有较小字体大小的span 元素？
【问题讨论】：
-
内联元素取其父元素的行高，如果您希望它有自己的行高，请使用 inline-block - from w3c：在不可替换的内联元素上，'line-height ' 指定用于计算行框高度的高度。
-
@Pete - 但是父级的行高考虑了跨度的较大字体大小，正如您在the jsfiddle 中看到的那样。我想知道为什么当跨度中的字体大小较小时（并且段落中没有其他内容）它不会。
-
因为跨度是内联的，因此您在其上设置的行高与您在 p 上设置的不同 - 当跨度变大时，它会增加 p 的行高，因为 p 必须调整它的行框高度以适应较大的文本，当它变小时，p 不需要做任何事情，所以它保持原来的行高
-
这是合乎逻辑的行为，但有点难以解释......正如你所说，这里涉及一种最小/最大值，将尝试为你提供相关的规范
标签： html css typography froala