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

【问题标题】：Determine height of div based on font-size根据字体大小确定div的高度
【发布时间】：2020-08-27 06:24:36
【问题描述】：

我有以下代码，其中字体大小、行高和高度都定义为相同的值。我希望所有字体都包含在容器中。

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

正如您在CodePen 中看到的那样，'p' 的底部被 div 切掉了。

要求：

我的问题实际上归结为在我知道字体的点值的情况下，如何确定 div 的确切高度（以英寸为单位）。

根据这篇文章this post 中的第二个答案，我希望所有内容都适合 div。我哪里错了？

【问题讨论】：

【解决方案1】：

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

内容适合此 div 所需的高度会根据文本的数量而有所不同。如果您知道此文本中有多少行（基于字体大小），您可以简单地将其与行高相乘。这将为您提供 pt 中 div 的大小。之后，您可以使用this one 等在线计算器来计算完整尺寸。

我在您的 CSS 中看到的问题是您的 line-height 和 font-size 完全相同。这可能（并且可能会）导致文本重叠问题，或者在最好的情况下，文本难以阅读。这就是它的样子：

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

这就是它的样子：

希望能回答你的问题。

更新：
所以，你说你的文字被切断了。由于您的 overflow: hidden 属性以及您的 line-height 和 font-size 相同的事实，它被切断了。
签出this jsfiddle。

#container{
  font-size:25pt;
  line-height:1;
  overflow: hidden;
  border: 1px solid red;
}

解决此问题的方法是省略 div 高度属性，只增加行高属性（如上所述）。如果您真的想设置 div 高度，可以将其设置为 37.5pt（或 0.52083333333334in），如此处所示 JS Fiddle

#container {
  font-size: 25pt;
  line-height: 1.5;
  height: 0.52083333333334in;
  overflow: hidden;
  border: 1px solid red;
}

现在没有文本被截断，您的 div 在 pt 中的高度是 37.5(font-size*1.5) 或者，正如我所说的 0.52083333333334in。

如果这回答了您的问题，请将其标记为答案，否则发表评论，我会尝试更新我的答案。

【讨论】：

感谢您的回复。我刚刚更新了我的问题以解决您在此处指出的问题。幸运的是，我不需要担心多行文本。我只需要弄清楚包含单行文本的 div 的高度应该是多少。
根据我上面链接的计算器，对于 1 行文本，行高为 25pt，没有填充，即 0.34722222222223in。
是的，我以前玩过那个计算器，但无济于事。如果在 CodePen 中将该数字作为 div 的高度打入，它仍然会截断文本。
抱歉回复晚了。正如我在帖子中所说，您应该避免将字体大小设置为等于行高。如果这两个值相同，那么您得到的是文本将不适合您的 div（如果您将其设置为与字体大小相同）。我会用更多信息更新我的答案