`ch`单位

Question

使用固定宽度字体时，我想在字符中指定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

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

Wikipedia's article说“em”并不总是M的宽度，所以看起来“em”单位看起来不可信任。

Answer 1

`ch`单位

您正在寻找的单位是ch。根据{{3}}：

ch：表示元素font中字形“0”（零，Unicode字符U + 0030）的宽度，或者更确切地说是高级测量值。

主流浏览器的当前版本（MDN docs）支持它。

实施例

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

Answer 2

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

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

将上面的示例更改为

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

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

既然em和ex在这里没有用，那么仅CSS解决方案的可能策略就是

创建一个仅包含＆amp; 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>

（w * 10 + 1）中的+1是处理舍入问题。

Answer 3

为什么不使用div的动态宽度并使用php在所需数量的字符后插入一个中断？会是这样的。

<?php
 $linelength = (chars per line);
 $data = "1 3 5 7 9 1 3 5 7 9 1";
 $lines = strlen($data) / $linelength;
 $count = 0;
 while($count < $lines) {
  echo substr($data, $count*$linelength, $linelength)."<br />";
 }
 if((strleng($data) % $linelength) > 1) {
  echo substr($data, $lines*$linelength)."<br />";
 }
?>

以字符指定宽度

3 个答案:

`ch`单位

实施例

以*字符*指定宽度

3 个答案:

ch单位

实施例

以字符指定宽度

`ch`单位