根據字體大小確定 div 的高度

Question

我有以下代碼，其中字體大小、行高和高度都定義為相同的值。 我希望所有字體都包含在容器中。

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

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

要求：

• 溢出必須隱藏
• 文本將始終位於一行（無需計算 2 行以上的文本）

鑒於我知道字體的點值，我的問題實際上歸結為如何確定 div 的確切高度（以英寸為單位）。

根據這篇文章中的第二個答案，我希望所有內容都適合 div。 我在哪里錯了？

Answer 1

您是否在將內容裝入 div 時遇到問題，或者您只是想計算所需打印表面的大小？

內容適合此 div 所需的高度將根據文本量而有所不同。 如果您知道此文本中有多少行（基於字體大小），您可以簡單地將其與行高相乘。 這將為您提供 pt 中 div 的大小。 之后，您可以使用像這個這樣的在線計算器來計算完整尺寸。

我在您的 CSS 中看到的問題是您的 line-height 和 font-size 完全相同。 這可能（並且可能會）導致文本重疊問題，或者在最好的情況下，文本難以閱讀。 這就是它的樣子：

我可能會使用 go標准/黃金比例的行高 = 字體大小 * 1.5

這就是它的樣子：

希望這能回答你的問題。

更新：
所以，你說你的文字被切斷了。 由於您的 overflow: hidden 屬性以及您的 line-height 和 font-size 相同的事實，它被切斷了。
檢查這個jsfiddle 。

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

你可以做些什么來解決這個問題是省略 div height 屬性，只增加 line height 屬性（如上所述）。 如果您真的想設置 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。

如果這回答了您的問題，請將其標記為答案，否則發表評論，我將嘗試更新我的答案。