在*字符*中指定宽度

小编典典

在字符中指定宽度

css

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

阅读 280

2020-05-16

共1个答案

小编典典

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>

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

2020-05-16