Question

我有一个大写的文字，例如ABC。
因为它是大写的，所有字符都具有相同的高度我还有一个固定高度的容器（div），例如100px。

如何使此文本垂直填充，因此每个字母的高度恰好为100像素？

我尝试font-size: 100px，但它没有填充容器（上方和下方有间隙）有关示例，请参阅http://jsfiddle.net/6z8un/1/。

更新1：
假设所有字符实际上具有相同的高度（差异不存在或可忽略不计）。否则问题没有多大意义。

更新2：
我很确定它可以使用https://stackoverflow.com/a/9847841/39068来解决，但到目前为止我还没有完美的解决方案。我认为上升和下降是不够的，我需要顶级空间的其他东西。

Answer 1

line-height http://jsfiddle.net/6z8un/2/无法解决问题，因为这不会删除空格。您可以通过硬编码应用大小（对我而言，它适合126px的字体大小）但这对每个用户都不同（sans-serif可以由用户/系统/浏览器配置）

Windows默认sans-serif字体MS sans serif与Android上的Droid sans serif或Ubuntu上的DejaVu Sans不同。

要解决此问题，您可以将字体设置为默认字体，例如Times New Roman，但默认情况下并非每个系统都有此字体。

要解决此问题，您可以使用从httpsp：//google.com/fonts等服务器导入的自定义字体但并非每个浏览器都支持自定义字体。

我认为解决这个问题的唯一方法就是使用图像。

但是自定义字体也应该在现代浏览器上完成它们的工作:)（例如：http://jsfiddle.net/6z8un/5/）

Answer 2

使用此代码。我希望这可以帮到你。

<div class="outer"><div class="inner">ABC</span></div>

.outer {
    margin: 0;
    padding: 0;
    height: 75px;
    overflow-y: hidden;
}

.inner {
    font-size: 100px;
    background-color: #ccc;
    font-family: sans-serif;
    margin-top: -18px;    
}

注意：据我所知，每当我们使用font-size时，上下间隙也是高度的一部分。我的意思是font-size =上部差距+字体的实际高度+下部差距。因此，如果我们想要100px div，那么请使用大于100的font-size。

Answer 3

这可以吗？

http://jsfiddle.net/6z8un/4/

HTML：

<div><span>ABC</span></div>

CSS：

div {
    height: 100px;
    background-color: #ddd;
    font-family: sans-serif;
}
span {
    font-size:136px;
    margin-top:-25px;
    display:inline-block;
};

Answer 4

到目前为止，我制作了一个小脚本，用帆布测量字母高度（我认为放在GitHub上会很好）。它目前略显不足，主要是因为缓存。

我已将其作为GitHub上的库发布，请参阅此处：https://github.com/ashmind/textmetrics。

不幸的是我没有时间将演示工作作为GitHub页面，所以我无法链接到它。

如何使用JS / CSS垂直填充大写文本的容器？

4 个答案: