如何设置< div>的宽度以适应恒定字母数字的字体？ [英] How to set width of <div> to fit constant number of letters in monospace font?

问题描述

我研究了一段时间，还没有找到一个CSS解决方案， em 和 ex 在这种情况下正确。我想要的只是一个完全适合80x25等宽文本的div框。我必须使用Javascript解决方案吗？

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?

推荐答案

em 在这种情况下，如果你知道适当的比例涉及到你的字体。尝试以下HTML：

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

（这样做的危险是一些浏览器调整字体，这可以改变字体的宽度/高度。可能必须使用JavaScript。）

(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>

这篇关于如何设置< div>的宽度以适应恒定字母数字的字体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！