根据字体大小确定div的高度

Question

我有以下代码，其中font-size，line-height和height均定义为相同的值。我希望所有字体都包含在容器中。

#container{
    font-size:25pt;
    line-height:25pt;
    height:25pt;
    overflow:hidden;
}

正如您在CodePen中所看到的，div的底部被斩掉。

要求：

• 溢出必须被隐藏
• 文本将始终在一行上（无需计算两行以上的文本）

我的问题实际上归结为如果我知道字体的磅值，如何确定以英寸为单位的div的确切高度。

基于此帖子的第二个答案this post，我希望所有内容都适合div。我在哪里错了？

Answer 1

您是否在将内容放入div时遇到问题，还是只想计算所需的打印表面尺寸？

内容适合此div所需的高度将根据文本的数量而变化。如果您知道该文本中有多少行（基于字体大小），则可以将其乘以行高。那会给你div的div大小。之后，您可以使用在线计算器，例如this one来计算完整大小。

我在CSS中看到的问题是，行高和字体大小完全相同。这可能（并且可能会）导致文本重叠或在最佳情况下难以阅读的文本出现问题。外观如下：

我可能会选择行高的standard/golden ratio =字体大小* 1.5

这会是这样：

希望能回答您的问题。