Question

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

Answer 1

尝试使用in the CSS3 specification所述的ch单元：

等于用于渲染它的字体中找到的“0”（ZERO，U + 0030）字形的已用预先测量值。

因此width: 80ch指定了80个字符的宽度限制。

Answer 2

如果您知道字体所涉及的正确比率，则

em在这种情况下有效。请尝试以下HTML：

（这样做的危险在于某些浏览器会调整字体，这可能会改变字体的宽度/高度。准确度达到100％时，您可能需要使用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 3

对于高度，您可以使用em，但您还必须设置line-height：

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

或者间距更长：

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

字符宽度没有CSS单位，所以我担心你需要一些Javascipt ......

Answer 4

Blixt的回答是正确的，但如果它能让数学更容易，你也可以这样做：

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

如何设置<div>的宽度以适应等宽字体中的常量字母数？</div>

4 个答案: