我进行了一段时间的研究，但还没有发现CSS的解决方案。在这种情况下，em 和 ex 单位并不正确。我的目标是创建一个div盒子，正好适配80x25的等宽文本。我必须使用JavaScript解决方案吗？
如何设置<div>标签的宽度以适应等宽字体中固定数量的字母？
16
- btw0
4个回答
33
- sunaku
2
5
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>
- Blixt
5
1如果用户没有 Courier 字体怎么办？在这种情况下，等宽字体可能会有不同的宽高比。即使是相同字体在不同缩放比例下的比例也不是固定的，请尝试缩放页面。 - btw0
1是的，正如我在上一段中所写的，这并不是一种完美的方法，但使用CSS它是最接近的。Courier根据其大小具有不同的比率，并且此外，一些浏览器会调整字体以“更好地呈现”。字体一直很难测量，而这种情况也不例外。基本上，您最好使用JavaScript进行此操作（让浏览器渲染，然后再测量）。 - Blixt
那个巨大的代码块之后的小段落很容易被忽视 :) - btw0
如果你不把下面那段话藏在一个巨大的代码块下面，当然会因为这样说而被踩... ;P - Guffa
当我尝试运行你的代码时，它给了我一个大小为60x25个字符的框。使用回退等宽字体时，它会给出一个大小为80x25的框... - Guffa
1
对于高度，您可以使用em，但您还必须设置line-height：
height: 25em; line-height: 1em;
或者再加点间距：
height: 30em; line-height: 1.2em;
没有适用于字符宽度的CSS单位，所以恐怕您需要一些JavaScript...
- Guffa
5
如果您知道字符的高度和宽度比，您可以使用 ems 设置适当的宽度（但仅适用于等宽字体，其中每个字符具有相同的宽度）。 - Jason Francis
1是的，如果您知道比例，那么这会起作用，但您从未知道。比例因实际使用的字体以及文本的渲染方式（字体平滑等）而异。 - Guffa
你需要知道比率吗？我认为
em、ex 和 ch 在高度属性中被解释为字符高度，在宽度属性中被解释为宽度。 - Stuart P. Bentley哦，等等，
em和ex是高度单位，而ch是宽度单位。因此，真正的答案是您可以像使用em设置宽度一样使用ch。 - Stuart P. Bentley1（“ch”是一个相对较新的属性，实际上在2009年写作时几乎不存在。） - Stuart P. Bentley
0
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 */
- Jason Francis
1
不行。在我的电脑上这会产生一个91x25的框。 - Guffa
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
ch单位是相对较新的东西（甚至没有相关的caniuse矩阵），这就是为什么上面较旧的答案被接受的原因。 - Stuart P. Bentleych仍然无法正常工作。我很想能够使用它，因为它恰好是所需的解决方案，但它在某些地方根本不起作用。 - Morag Hughson