How to set the width of a <div> to set a constant number of letters in a monospace font?

Question

I researched for a while until I found a solution for CSS, em and ex units are wrong in this case. I want just a div field that exactly matches the 80x25 monospaced text. Should I resort to Javascript solutions?

Answer 1

em works in this case if you know the right relationship associated with your font. Try using the following HTML:

(The danger is that some browsers adjust the font, which can change the width / height of the font. For 100% accuracy you may need JavaScript.)

 <style type="text/css"> #text-container { border: #f00 solid 1px; font: 10px/1.2 Courier, monospace; width: 48em; /* 80 x 0.6 (the width/height ratio of Courier) */ height: 30em; /* 25 x 1.2 (line-height is 1.2) */ overflow: hidden; } </style> <div id="text-container"> 00000000001111111111222222222233333333334444444444555555555566666666667777777777 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 12345678901234567890123456789012345678901234567890123456789012345678901234567890 </div> 

Answer 2

Try using the ch block described in the CSS3 specification :

It is the same for the used preliminary measure of the glyph "0" (ZERO, U + 0030) found in the font used for rendering.

So width: 80ch indicates a width limit of 80 characters.

Answer 3

You can use em for height, but you should also set line-height :

 height: 25em; line-height: 1em; 

Or at a slightly longer interval:

 height: 30em; line-height: 1.2em; 

There is no CSS element for character width, so I'm afraid you need Javascipt ...

Answer 4

Blixt's answer is correct, but you can also do this if it simplifies the math:

 font-family: Courier; font-size: 0.57em; line-height: 1.2em; width: 80em; height: 30em; /* 1.2 * 25; you could set the line-height at 1em and the box height at 25, but that would squish things too much */