如何显示触及div边框的文字？

Question

我有一个包含一些文字的DIV。 div绝对定位。它有style="border:1px solid black"所以它显示为一个漂亮的矩形。 现在在这个矩形内，我想要显示文本，无论是顶部还是底部（以较简单的方式）边框触摸文本，如下图所示：

我有以下要求：

1. 我不想强调文字 - 这不是问题
2. 我不想在DIV中手动定位文本

预期的行为是：我设置DIV的位置，文本自动触摸边框（顶部或底部边框） - 无论我设置什么字体系列或字体大小。

我需要这个的原因是能够将HTML中的元素放在HTML的确切位置 - 就像在PDF上一样。

Answer 1

如果font-size是固定值，您可以使用纯CSS，使用额外的span：

HTML：

<div id="box"><span>FAKTURA</span></div>

CSS：

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

Check JSFiddle

然而，您的观点3表示字体大小可能不同。比你无法用纯CSS修复它。但是使用JQuery，您可以：

HTML保持不变。

CSS：

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

JQuery的：

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

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