【问题标题】：Specify width in *characters*以*字符*指定宽度
【发布时间】：2012-01-01 10:55:39
【问题描述】：

当使用固定宽度字体时，我想用字符指定HTML元素的宽度。

“em”单位应该是 M 字符的宽度，所以我应该可以使用它来指定宽度。这是一个例子：

<html>
  <head>
    <style>
      div {
        font-family: Courier;
        width: 10em;
      }
    </style>
  </head>
  <body>
    <div>
      1 3 5 7 9 1 3 5 7 9 1
    </div>
  </body>
</html>

结果不是我想要的，因为浏览器在第 15 列之后换行，而不是 10：

1 3 5 7 9 1 3 5
7 9 1

（Firefox 和 Chromium 中的结果，都在 Ubuntu 中。）

Wikipedia's article 说“em”并不总是 M 的宽度，因此看起来“em”单元肯定不能被信任。

【问题讨论】：

我相信“en”也是合法的宽度；它是排版中数字的宽度。这可能对你更有效。
'em' 属性使用字体的 font-size 或 height，而不是字母的宽度。 @Pete：不是，见CSS Values and Units Module Level 3。
除非您使用的是固定宽度的字体，否则不同的字符有不同的宽度。因此，根据显示的字符数设置宽度在功能上是不可能的。
How to set width of <div> to fit constant number of letters in monospace font?的可能重复
“这个问题仍然需要其他用户的 4 票才能关闭” - 嘿，这是我的问题！让我关闭它！

标签： css font-size

【解决方案1】：

`ch`单位

您要查找的单位是ch。根据MDN docs：

ch：表示元素font 中字形“0”（零，Unicode 字符 U+0030）的宽度，或更准确地说是提前量度。

当前版本的主流浏览器都支持（caniuse）。

示例

pre {
    width: 80ch; /* classic terminal width for code sections */
}

【讨论】：

还有figure space，正如维基百科的space (punctuation) 文章中所述，它精确地“等于一位数字的宽度”。它的 Unicode 值为 U+2007，可以使用&#x2007; 或&#8199; 在 HTML 中输入。它在功能上等同于 CSS 的 ch 单元，但虽然没有得到广泛支持，但它可以用作 HTML 中的解决方法（丑陋的 hack，但应该可以）。
其实，根据this chromium issue的说法，Chrome从v27开始就支持了，所以目前所有主流浏览器（IE、Chrome和Firefox）的最新版本都支持ch单元:)
应该注意字符大小是元素字体中字形“0”的大小。如果您希望使用较大的字符，例如“m”或“w”，您可能需要考虑相应扩展或根据需要扩展（例如 stackoverflow.com/questions/7168727/…）
是的，等宽字体没有问题。
IE11 支持错误。 stackoverflow.com/questions/17825638/…

【解决方案2】：

1em 是 M 的高度，而不是宽度。 ex 也一样，它是 x 的高度。更一般地说，这些是大写和小写字母的高度。

宽度是一个完全不同的问题......

将上面的示例更改为

<div>
    <span>1</span> 3 5 7 9 1 3 5 7 9 1
</div>

你会注意到跨度的宽度和高度是不同的。对于 Chrome 上 20px 的字体大小，跨度为 12x22 px，其中 20px 是字体的高度，2px 是行高。

现在由于 em 和 ex 在这里没有用处，纯 CSS 解决方案的一个可能策略是

创建一个只包含的元素
让它自动调整大小
将您的 div 放在和内
使其比周围元素大 10 倍。

然而，我没有设法编写这个代码。我也怀疑这是否真的有可能。

同样的逻辑也可以用 Javascript 来实现。我在这里使用无处不在的 jQuery：

<html>
  <head>
    <style>
      body { font-size: 20px; font-family: Monospace; }
    </style>
    <script 
      type="text/javascript" 
      src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
  </head>
  <body>
    <div>1 3 5 7 9 1 3 5 7 9 1</div>
    <script>
      $('body').append('<div id="testwidth"><span>&nbsp;</span></div>');
      var w = $('#testwidth span').width();
      $('#testwidth').remove();
      $('div').css('width', (w * 10 + 1) + 'px');       
    </script>
  </body>
</html>

(w * 10 + 1) 中的 +1 用于处理舍入问题。

【讨论】：

我希望有一个纯 CSS 解决方案，这只有在您碰巧知道字符的高度和宽度之间的比率时才有可能（参见 stackoverflow.com/questions/1255281/…）。我接受这个作为答案，因为它似乎是一个强大的解决方案。
根据graphicdesign.stackexchange.com/questions/4035/…graphicdesign.stackexchange.com/questions/4035/…这里的答案，1em 不是 M 的高度“|”字符应该更接近 1em。
Sogartar，澄清一下：在排版中，1 em 确实是固定宽度字符的宽度（以及 em 高度）。然而，这是“正确的排版”，我们有很多不经意间的人在那里创建不遵守排版规则的字体文件——尤其是在网络字体的情况下。我在这里评论的重点不是（仅仅是）粗鲁的哗众取宠。我的意思是：测试，测试，测试。（然后再测试一些。）
请使用“ch”单位。这个答案很好地描述了它：stackoverflow.com/a/16586438/244640

ch单位

示例

`ch`单位