Html 如何修复从div元素底部伸出的文本

我已经将代码缩减到最低限度：似乎将font size和line height属性设置为px值会导致在实践中使用不同的值

在本例中，div设置为77px高度，字体大小和行高也设置为77px高度。但是，实际字母是使用85像素高度内的图示符绘制的

有没有办法让那封信在77像素的高度内画出来

.wrapper{
背景色：rgb（80,80,80）；
颜色：红色；
宽度：80px；
高度：77px；
线高：77px；
字体大小：77px；
字体系列：Verdana；
}

---

Q

字母顶部似乎有一个小的空白，这可能是你的问题

也许你可以把这封信放在一个跨距标签里，并用这些字母来“纠正”这个错误：

<div class=wrapper><span>Q</span></div>

---

文本元素包括顶部和底部的空间，构成行高。当您将行高设置为字体的相同大小时，它不会使顶部的空间变小，而只是意味着下一行将向上移动更近。 为了删除顶部的空格，可以使行高小于字体大小。我玩了一下，得到了一个60像素的线条高度，而你的字体大小是77像素

*{
保证金：0；
填充：0；
}
.包装纸{
背景色：rgb（80,80,80）；
颜色：红色；
高度：77px；
宽度：80px；
线高：60px；
字体大小：77px；
字体系列：Verdana；
}
.wrapper 2{
背景色：rgb（80,80,80）；
颜色：红色；
高度：77px；
宽度：80px；
线高：0.8；
字体大小：77px；
字体系列：Verdana；
}
.包装纸3{
背景色：rgb（80,80,80）；
颜色：红色；
高度：50px；
宽度：70px；
线高：0.8；
字体大小：50px；
字体系列：Verdana；
}

Q


Q


Q

您希望文本动态地适应“div”吗？这个“glyph”是图像吗。。我根据一次需要在页面上放置多少个div来计算div的大小，并且我需要单字母文本来完全放置在该div中。问题是，我无法确定如何指定字体大小以使其适合。这对于div大小的特定情况很好，但如果这种情况发生变化，我怎样才能知道我应该使用什么样的线高度呢？因为我不知道div的大小，它可以是任何东西，我需要一种计算数字的方法，而不仅仅是手动计算。我知道你的div会根据视图端口改变大小，但是你的字体大小也会改变吗？如果是这样，您可以使用一个数字来计算线高度，而不是使用固定的px高度。如果将行高设置为1，则行高计算为字体大小乘以1。我用两个例子修改了上面的代码段，其中行距设置为0.8，计算行距小于字体大小。第三个示例显示了一个较小的div。但是，如果您的字体大小始终为固定的77px，那么当div太小时，它将始终溢出。我需要在所有视口大小下将字母保留在div中，因此，是的，确切的问题是，我找不到准确、正确的方法来确定要使用的字体大小，以在精确的像素高度绘制字母。在您的示例中，使用行高倍数是很好的，但0.8的值仅适用于特定大小的特定字体；我无法找到一个数字来保证它能正常工作。行距太短，字母与div顶部重叠；问题不是我不能使字母合适，而是我只能在运行程序之前计算出偏移量，我不能这样做，因为div的大小可以更改为任何值。

.wrapper {
  background-color: rgb(80, 80, 80);
  color: red;
  width: 80px;
  height: 77px;
  line-height: 77px;
  font-size: 77px;
  font-family: Verdana;
  position:relative; /* Positioning parent*/
}

span{
  position:absolute;
  top:-9px;
  left:8px;
}