Javascript 如何设置<；部门>；要在单空格字体中容纳固定数量的字母？

我研究了一会儿，还没有找到CSS解决方案，

em

和

ex

单位在这种情况下是不正确的。我想要的只是一个完全适合80x25单空格文本的div框。我必须求助于Javascript解决方案吗？

关于您可以使用的高度

em

，但您还必须设置

行高度

：

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

或者用更大的间距：

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

---

字符宽度没有CSS单位，因此我担心您需要一些Javascipt…

em

在这种情况下可以工作，如果您知道字体所涉及的适当比例。请尝试以下HTML：

（这样做的危险在于，一些浏览器会调整字体，这可能会改变字体的宽度/高度。为了100%准确，您可能必须使用JavaScript。）

#文本容器{
边框：#f00实心1px；
字体：10px/1.2 Courier，monospace；
宽度：48em；/*80 x 0.6（信使的宽高比）*/
高度：30em；/*25x1.2（线高为1.2）*/
溢出：隐藏；
}
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
Blix的回答是正确的，但如果它使计算更容易，您也可以这样做：

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

尝试使用所述的
ch
装置：

等于在用于渲染的字体中找到的“0”（零，U+0030）标志符号的使用的高级度量值

因此，
width:80ch
指定了80个字符的宽度限制。
如果您知道字符的高度和宽度的比率，您可以使用ems设置适当的宽度（但它仅适用于每个字符宽度相同的单空格字体）。是的，如果您知道比率，这将起作用，但您永远不会这样做。比率随实际使用的字体以及文本的呈现方式（字体平滑等）而变化。您必须知道比率吗？我认为
em
、
ex
和
ch
在用于高度属性时被解释为字符高度，而宽度属性则被解释为字符宽度。哦，等等，
em
和
ex
是高度，
ch
是宽度。因此，这里真正的答案是，您可以使用
ch
像
em
一样设置宽度。（
ch
是一个相对较新的属性，在2009年编写上述内容时实际上并不存在。）如果用户没有Courier字体怎么办？在这种情况下，单空格字体可能具有不同的宽高比。即使同一字体的比例在不同的比例下也不是一个常数，试着放大/缩小页面。是的，正如我在上一段中所写的，这不是一个完美的方法，但它是使用CSS最接近的方法。Courier根据其大小有不同的比例，除此之外，一些浏览器还调整字体以“看起来更好”。字体一直很难测量，这种情况也不例外。基本上，最好使用JavaScript（让浏览器渲染，然后测量。）一个巨大代码块后的最后一小段很容易被忽略：）如果你不在一个巨大代码块下隐藏这样的一段，你当然会因为说它而被否决；当我尝试你的代码时，它会给我一个60x25个字符的框。使用回退单空间，它给出了一个80x25的框…不。现在，假设你不需要支持比IE9旧的浏览器，这是正确的解决方案。
ch
单元是一个相对较新的东西（它甚至没有一个caniuse矩阵），这就是为什么上面的旧答案是可以接受的。我必须补充的是
ch
在IE11上仍然不能正常工作。我希望能够使用它，因为它正是所需的解决方案，但它并不适用于任何地方。
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 */