我进行了一段时间的研究,但还没有发现CSS的解决方案。在这种情况下,em
和 ex
单位并不正确。我的目标是创建一个div盒子,正好适配80x25的等宽文本。我必须使用JavaScript解决方案吗?
我进行了一段时间的研究,但还没有发现CSS的解决方案。在这种情况下,em
和 ex
单位并不正确。我的目标是创建一个div盒子,正好适配80x25的等宽文本。我必须使用JavaScript解决方案吗?
em
在这种情况下是有效的,如果您知道与字体相关的正确比例。请尝试以下HTML代码:<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>
对于高度,您可以使用em
,但您还必须设置line-height
:
height: 25em; line-height: 1em;
或者再加点间距:
height: 30em; line-height: 1.2em;
没有适用于字符宽度的CSS单位,所以恐怕您需要一些JavaScript...
em
、ex
和 ch
在高度属性中被解释为字符高度,在宽度属性中被解释为宽度。 - Stuart P. Bentleyem
和ex
是高度单位,而ch
是宽度单位。因此,真正的答案是您可以像使用em
设置宽度一样使用ch
。 - Stuart P. Bentleyfont-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 */
ch
单位是相对较新的东西(甚至没有相关的caniuse矩阵),这就是为什么上面较旧的答案被接受的原因。 - Stuart P. Bentleych
仍然无法正常工作。我很想能够使用它,因为它恰好是所需的解决方案,但它在某些地方根本不起作用。 - Morag Hughson