Jquery 如何显示与div边框接触的文本？

我有一个包含一些文本的DIV。 div的位置绝对正确。它的样式=边框：1px纯黑色，因此显示为一个漂亮的矩形。 现在，在这个矩形中，我想显示一个文本，它的顶部或底部（以较容易接触文本的边界为准），如下图所示：

我有以下要求：

我不想在正文下面划下划线——这不是问题所在 我不想在DIV中手动定位文本 预期的行为是：我设置了DIV的位置，文本会自动接触上边框或下边框-无论我设置了什么字体系列或字体大小

---

我之所以需要这样做，是为了能够将HTML中的元素精确定位在屏幕上，就像在PDF中一样。

如果字体大小是固定值，可以使用纯CSS，方法是使用额外的跨距：

HTML:

但是，您的第3点指出字体大小可以不同。你不能用纯CSS来修复它。但是，使用JQuery，您可以：

HTML保持不变

CSS:

JQuery：

$(document).ready( function() {
    var fontSize = parseInt( $("#box span").css('font-size'), 10);
    fontSize = fontSize - 4;
    $("#box").height( fontSize+"px" );
});

也检查一下。

---

JQuery需要一些调整。例如，当您将字体大小更改为90px时，边框不会接触文本。将其更改为12px，文本将消失。这需要一些调整。

我认为你做不到。浏览器使用的字体没有那么复杂。@Juhana这就是我害怕的。我甚至可以使用JavaScript，如果它有帮助的话……很好。谢谢我认为在大多数情况下，高度=0.9*字体大小会起作用！

#box {
    height: 20px;
    overflow: hidden;
    border-bottom: 1px solid black;
    display: inline-block;
}
#box span {
    font-size: 24px;
}

#box {
    overflow: hidden;
    border-bottom: 1px solid black;
    display: inline-block;
}
#box span {
    font-size: 24px;
}

$(document).ready( function() {
    var fontSize = parseInt( $("#box span").css('font-size'), 10);
    fontSize = fontSize - 4;
    $("#box").height( fontSize+"px" );
});