时间戳

首页 > 解决方案 > 根据字体大小确定 div 的高度

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

问题描述

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

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

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

要求：

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

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

标签： htmlcssfontsfont-sizetypography

解决方案

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

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

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

我可能会选择行高的标准/黄金比例=字体大小*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。

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

推荐阅读