在字符中指定宽度

108

当使用固定宽度的字体时，我想用字符指定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的文章说，“ em”并不总是M的宽度，因此肯定看起来“ em”单元对此不可信。

css font-size

— 马丁·维尔坎斯
source

我相信“ en”也是合法范围；它是排版中的数字宽度。那可能对您更好。

— 皮特·威尔逊

'em'属性使用字体的font-size或height，而不是字母的宽度。@Pete：不是，请参阅CSS值和单位模块级别3。

— animuson

除非您使用固定宽度的字体，否则不同的字符具有不同的宽度。因此，在功能上无法根据显示的字符数设置宽度。

— 艾米丽

如何设置<div>的宽度以适合等宽字体中恒定数量的字母的

— Martin Vilcans 2011年

“此问题仍然需要其他用户4票才能关闭”-嘿，这是我的问题！让我关闭它！

— Martin Vilcans 2011年

Answers:

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解决方案的可能策略是

创建一个仅包含＆nbsp;的元素
让它自动调整大小
将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>

+1 in（w * 10 +1）用于处理舍入问题。

— 格德·里塞尔曼
source

我希望有一个纯CSS解决方案，只有当您碰巧知道字符的高度和宽度之间的比率时，才有可能（请参见stackoverflow.com/questions/1255281/…）。我接受这作为答案，因为这似乎是一个可靠的解决方案。

— Martin Vilcans 2011年

根据此处的答案，1em不是M的高度graphicdesign.stackexchange.com/questions/4035/… “ |” 字符应更接近1em。

— Sogartar '16

为了说明清楚，Sogartar：在排版中，正确的1 em实际上是固定宽度字符的宽度（以及em高度）。但是，这是“正确的排版”，而且我们有许多夜间工作人员创建不遵守排版规则的字体文件，尤其是对于Web字体。我在这里的评论的重点不是（仅）curmudgeonly。我的观点是：测试，测试，测试。（然后再测试一些。）

— Parapluie 2016年

217

`ch` 单元

您要寻找的单位是ch。根据MDN文档：

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

当前版本的主要浏览器（caniuse）支持该功能。

例

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

— 电晶体09
source

还有一个数字空间，正好等于Wikipedia的空格（标点）文章中所述的“等于一位数字的宽度” 。它的Unicode值为U + 2007，可以使用 或在HTML中输入 。它在功能上等同于chCSS单元，但是虽然没有得到广泛支持，但是它可以用作HTML中的变通方法（难看，但应该可以）。

— waldyrious 2014年

实际上，根据这个铬问题，Chrome从v27开始支持它，所以现在所有主要浏览器（IE，Chrome和Firefox）的最新版本都支持ch单元：）

— waldyrious 2014年

应该注意的是，字符大小是元素字体中字形“ 0”的大小。如果你希望像“M”或更大的字符“W”，你可能要考虑相应扩大或有需要扩大它（如stackoverflow.com/questions/7168727/...）

— user420667

是的，等宽字体没有问题。

— Willege '16

IE11支持它错误。stackoverflow.com/questions/17825638/...

— aleha

在*字符*中指定宽度

ch 单元

例

在字符中指定宽度

`ch` 单元