-3

我有一个包含一些文本的 DIV。div 是绝对定位的。它有style="border:1px solid black"所以它显示为一个漂亮的矩形。现在在这个矩形中，我想显示顶部或底部（以更容易的为准）边框接触文本的文本，如下图所示：

在此处输入图像描述

我有以下要求：

  1. 我不想在文本下划线——这不是问题
  2. 我不想在 DIV 中手动定位文本

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

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

4

1 回答 1

1

如果字体大小是固定值，则可以使用纯 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;
}

检查 JSFiddle

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

HTML 保持不变。

CSS：

#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" );
});

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

于 2013-08-18T14:34:59.377 回答