[英]How to set width of <div> to fit constant number of letters in monospace font?
I researched for a while, hasn't found a CSS solution yet, em
and ex
units are not correct in this case. 我研究了一段时间,还没有找到CSS解决方案,在这种情况下,
em
和ex
单位不正确。 What I want is simply a div box that exactly fits 80x25 monospace text. 我想要的只是一个完全适合80x25等宽文本的div框。 Do I have to resort to Javascript solutions?
我是否必须使用Javascript解决方案?
Try using the ch
unit described in the CSS3 specification : 尝试使用CSS3规范中描述的
ch
单元:
Equal to the used advance measure of the "0" (ZERO, U+0030) glyph found in the font used to render it.
等于用于渲染它的字体中找到的“0”(ZERO,U + 0030)字形的已用预先测量值。
Thus width: 80ch
specifies an 80 character width limit. 因此
width: 80ch
指定80个字符的宽度限制。
em
does work in this case, if you know the proper ratios involved with your font. 如果您知道字体所涉及的正确比率,则
em
在这种情况下可以正常工作。 Try the following HTML: 请尝试以下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.) (这样做的危险在于某些浏览器会调整字体,这可能会改变字体的宽度/高度。对于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>
For the height you can use em
, but you have to set the line-height
also: 对于高度,您可以使用
em
,但您还必须设置line-height
:
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... 字符宽度没有CSS单位,所以我担心你需要一些Javascipt ......
Blixt's response is the correct one, but you can also do this if it makes the math easier: 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 */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.