Fatal编程技术网
  • css/
  • Css 以*个字符指定宽度*

Css 以*个字符指定宽度*

css

Css 以*个字符指定宽度*,css,font-size,Css,Font Size,使用固定宽度字体时，我希望以字符为单位指定HTML元素的宽度 “em”单位应该是M字符的宽度，所以我应该能够使用它来指定宽度。这是一个例子： <html> <head> <style> div { font-family: Courier; width: 10em; } </style> </head> <body> <div&

使用固定宽度字体时，我希望以字符为单位指定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>
（结果是在Ubuntu中使用Firefox和Chromium。）

表示“em”不一定是M的宽度，因此“em”单元在这方面绝对不可信。

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

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

将上面的示例更改为

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


1 3 5 7 9 1 3 5 7 9 1
你们会注意到跨度的宽度和高度是不同的。对于Chrome上20px的字体大小，跨距为12x22px，其中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> 

    
正文{字体大小：20px；字体系列：Monospace；}
1 3 5 7 9 1 3 5 7 9 1
$（'body'）。追加（''）；
var w=$（'#testwidth span'）.width（）；
$（'#testwidth'）。删除（）；
$（'div'）.css（'width'，（w*10+1）+'px'）；
    +1 in（w*10+1）用于处理舍入问题

    ch
    单元 您要找的设备是
    ch
    。根据报告：

    ch
    ：表示元素的
    字体中glyph“0”（零，Unicode字符U+0030）的宽度，或者更精确地说是提前度量
    
当前版本的主要浏览器（）支持它
    
例子

    我认为“en”也是一个法律宽度；它是排版中数字的宽度。“em”属性使用字体的字体大小或高度，而不是字母的宽度@皮特：不是，看。除非你使用固定宽度的字体，不同的字符有不同的宽度。因此，从功能上讲，无法根据显示的字符数设置宽度。可能重复“此问题仍需要其他用户进行4次投票才能结束”-嘿，这是我的问题！让我关上它！我希望有一个纯CSS的解决方案，这只有在你碰巧知道字符的高度和宽度之间的比率时才有可能（参见）。我接受这个答案，因为这似乎是一个稳健的解决方案。1em不是m的高度根据这里的答案，“|”字符应该更接近1em。Sogartar，澄清一下：在印刷术中，1em确实是固定宽度字符的宽度（以及em高度）。然而，这是“正确的排版”，我们有许多人在那里创造不遵守排版规则的字体文件，尤其是在网络字体的情况下。我在这里发表评论的目的不仅仅是哗众取宠。我的观点是：测试，测试，测试。（然后再测试一些。）还有一个，正如维基百科的文章所描述的，它精确地等于一个数字的宽度。它的Unicode值是U+2007，可以使用
     或
     。它在功能上相当于CSS的
    ch
    单元，但尽管这一功能没有得到广泛支持，但它可以作为HTML的一种变通方法（丑陋的黑客攻击，但应该可以使用）。事实上，据报道，Chrome从v27开始就支持它，所以现在所有主要浏览器（即Chrome和Firefox）的最新版本都支持它支持ch单位：）应该注意字符大小是元素字体中字形“0”的大小。如果你期望更大的字符，如“M”或“W”，你可能想考虑扩大或相应地扩大它的需要（例如）YEP，没有任何问题与蒙斯法文。IE11支持它错了。

    <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> 

    

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