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

Posted 2023-03-06

【中文标题】如何设置 <div> 的宽度以适应等宽字体中的常量字母数？

【英文标题】：How to set width of <div> to fit constant number of letters in monospace font?

【发布时间】：2010-11-18 07:45:41

【问题描述】：

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

【参考方案1】：

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

等于在用于呈现它的字体中找到的“0”（零，U+0030）字形的使用提前度量。

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

【讨论】：

如今，假设您不必支持 IE9 之前的浏览器，这是正确的解决方案。 ch 单元是一个相对较新的东西（甚至没有一个 caniuse 矩阵），这就是为什么上面的旧答案是公认的。

我必须补充一点，ch 在 IE11 上仍然无法正常工作。我希望能够使用它，因为它正是所需的解决方案，但它根本无法在任何地方工作。

【参考方案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>

【讨论】：

如果用户没有Courier字体怎么办？在这种情况下，等宽字体可能具有不同的宽度/高度比。即使相同字体的比例在不同比例下也不是恒定的，请尝试放大/缩小页面。

是的，正如我在上一段中所写的，这不是一个完美的方法，但它是最接近使用 CSS 的方法。 Courier 根据其大小有不同的比例，最重要的是，一些浏览器会调整字体以“看起来更好”。字体一直很难测量，这种情况也不例外。基本上，您最好为此使用 JavaScript（让浏览器呈现，然后测量。）

在一个巨大的代码块之后的最后一小段很容易被忽视:)

如果你不把这样的段落隐藏在一个巨大的代码块下面，你当然会因为这样说而被否决... ;P

当我尝试你的代码时，它给了我一个 60x25 字符的框。使用后备等宽空间，它提供了一个 80x25 的框...

【参考方案3】：

高度你可以使用em，但你也必须设置line-height：

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

或者多一点间距：

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

字符宽度没有CSS单元，所以恐怕你需要一些Javascipt...

【讨论】：

如果您知道字符的高度和宽度的比例，您可以使用 ems 设置适当的宽度（但它仅适用于每个字符具有相同宽度的等宽字体）。

是的，如果你知道这个比率，那会起作用，但你永远不会知道。该比例因实际使用的字体以及文本的呈现方式（字体平滑等）而异。

你一定要知道这个比例吗？我认为em、ex 和ch 在用于高度属性时被解释为字符高度，而在宽度属性中被解释为宽度。

哦等等，em 和 ex 是高度，ch 是宽度。所以这里真正的答案是你可以使用ch 像em 来设置宽度。

（ch 是一个相对较新的属性，在 2009 年编写上述内容时实际上并不存在。）

【参考方案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 */

【讨论】：

不。这在我的计算机上提供了一个 91x25 的框。