在这种情况下,如何计算ems中的“行高”?

时间:2017-10-24 14:46:18

标签: css css3

我理解行高是基本字体的倍数,即字体为12px的段落,行高为2em将使其为24px。

我有一些标记正在从Word复制并粘贴到我们的应用程序中的在线富文本编辑器中。除了大量的其他垃圾,我们得到以下场景。有时文本将粘贴在段落内的跨度,有时只是跨度。并且每个标签可以具有不同的字体大小。 (完全是单词,我们无法控制)。无论如何,线高度必须相同。但是段落的示例具有不同的行高,因为<p style='font-size: 16px;'><span style="font-size: 12px;">Candidates will be given a hypothetical psychological report in which relevant background information (i.e., country of origin, primary language spoken in the home, and length of time living in the U.S.) and assessment data will be detailed.Candidates should demonstrate an increasing understanding and knowledge of CLD concepts and issues within the reports. Based on information provided candidates are to complete the report incorporating the following:</span> </p> <span style="font-size: 12px;">Candidates will be given a hypothetical psychological report in which relevant background information (i.e., country of origin, primary language spoken in the home, and length of time living in the U.S.) and assessment data will be detailed.Candidates should demonstrate an increasing understanding and knowledge of CLD concepts and issues within the reports. Based on information provided candidates are to complete the report incorporating the following:</span>标记的字体大小大于跨度。基本上它似乎使用段落中的字体大小计算{{1}},但字体大小本身来自您期望的跨度。

我的第一个问题是......为什么行高使用段落的字体大小而不是跨度?

我的第二个问题是,有没有人能想到使用CSS解决这个问题?

显然你会删除内联样式,但是这个应用程序的用户不是开发人员,他们不了解html。这个编辑器的目的是让用户在没有开发人员帮助的情况下创建这些在线文档。我很乐意在样式表中找到克服这个问题的方法。

{{1}}
{{1}}

1 个答案:

答案 0 :(得分:0)

这是因为span是内联的,因此其文本受周围行高( p 的影响)的影响。如果您将span设置为display:inline-block,它将是相同的。

span, p {
   line-height: 2em;
   font-size: 14px;
}
p span{display:inline-block;}
<p style='font-size: 16px;'><span style="font-size: 12px;">Candidates will be given a hypothetical psychological report in which relevant background information (i.e., country of origin, primary language spoken in the home, and length of time living in the U.S.) and assessment data will be detailed.Candidates should demonstrate an increasing understanding and knowledge of CLD concepts and issues within the reports. Based on information provided candidates are to complete the report incorporating the following:</span>
</p>
<span style="font-size: 12px;">Candidates will be given a hypothetical psychological report in which relevant background information (i.e., country of origin, primary language spoken in the home, and length of time living in the U.S.) and assessment data will be detailed.Candidates should demonstrate an increasing understanding and knowledge of CLD concepts and issues within the reports. Based on information provided candidates are to complete the report incorporating the following:</span>