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

Question

I have a text that is uppercase, eg ABC .
As it is uppercase, all characters have the same height.
I also have a container ( div ) with fixed height, eg 100px .

How do I make this text fill it vertically, so each letter is exactly 100 pixels high?

I tried font-size: 100px , but it does not fill the container (there are gaps above and below).
See http://jsfiddle.net/6z8un/1/ for an example.

UPDATE 1:
Let's assume all characters actually have the same height (difference either does not exist or is negligible). Otherwise the question does not make much sense.

UPDATE 2:
I am pretty sure it can be solved using https://stackoverflow.com/a/9847841/39068 , but so far I had no perfect solution with it. I think ascent and descent are not enough, I would need something else for the top space.

Answer 1

line-height http://jsfiddle.net/6z8un/2/ will not solve the problem because this will not remove the whitespaces. You could apply the size by hardcoding (for me it fits with font-size of 126px) But this is different to every user (sans-serif can be configured by user/system/browser)

Windows default sans-serif font MS sans serif is different to Droid sans serif on Android or DejaVu Sans on Ubuntu.

To solve this problem, you could set a font to default, like Times New Roman , but not every system does have this font by default.

To solve this, you could use a custom font imported from a server like htttp://google.com/fonts but not every browser does support custom fonts.

I think the only way to solve this is to use an image.

But custom fonts should do their job on modern browsers too :) (eg: http://jsfiddle.net/6z8un/5/ )

Answer 2

Use this code. I hope this can help you.

<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;    
}

Note: As I know whenever we use font-size the upper and lower gap is also the part of height. I mean font-size = upper gap + actual height of font + lower gap. So if we want 100px div then use font-size larger than 100.

Answer 3

Is this ok?

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

So far I made a small script that measures letter heights using canvas (would be a good thing to put on GitHub I suppose). It is currently slightly unprecise, mostly because of caching.

I have published it as a library on GitHub, see here: https://github.com/ashmind/textmetrics .

Unfortunately I did not have time to make demo work as a GitHub page yet, so I can't link to it.