javascript - How to set width of <div> to fit constant number of letters in monospace font? - Stack Overflow

admin管理员组

文章数量:1173626

I researched for a while, hasn't found a CSS solution yet, em and ex units are not correct in this case. What I want is simply a div box that exactly fits 80x25 monospace text. Do I have to resort to Javascript solutions?

I researched for a while, hasn't found a CSS solution yet, em and ex units are not correct in this case. What I want is simply a div box that exactly fits 80x25 monospace text. Do I have to resort to Javascript solutions?

• javascript
• html
• css

Share Improve this question Follow asked Aug 10, 2009 at 14:37 btw0btw0 3,61677 gold badges3636 silver badges3636 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 35

Try using the ch unit described in the CSS3 specification:

Equal to the used advance measure of the "0" (ZERO, U+0030) glyph found in the font used to render it.

Thus width: 80ch specifies an 80 character width limit.

em does work in this case, if you know the proper ratios involved with your font. Try the following HTML:

(The danger with this is that some browsers adjust the font, which can alter the width/height of the font. For 100% accuracy, you might have to go with 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>

For the height you can use em, but you have to set the line-height also:

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

Or with a bit more spacing:

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

There is no CSS unit for a character width, so there I am afraid that you need some Javascipt...

Blixt's response is the correct one, but you can also do this if it makes the math easier:

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 */

本文标签： javascriptHow to set width of ltdivgt to fit constant number of letters in monospace fontStack Overflow