可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

When using a fixed width font, I'd like to specify the width of an HTML element in characters.

The "em" unit is supposed to be the width of the M character, so I should be able to use it to specify a width. This is an example:

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

The result is not what I wanted as the browser line breaks after column 15, not 10:

1 3 5 7 9 1 3 5
7 9 1

(Result in Firefox and Chromium, both in Ubuntu.)

Wikipedia's article says that an "em" is not always the width of an M, so it definitely looks like the "em" unit can't be trusted for this.

回答1:

1em is the height of an M, rather than the width. Same holds for ex, which is the height of an x. More generally speaking, these are the heights of uppercase and lowercase letters.

Width is a totally different issue....

Change your example above to

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

and you will notice width and height of the span are different. For a font-size of 20px on Chrome the span is 12x22 px, where 20px is the height of the font, and 2px are for line height.

Now since em and ex are of no use here, a possible strategy for a CSS-only solution would be to

Create an element containing just a  
Let it autosize itself
Place your div within and
Make it 10 times as large as the surrounding element.

I however did not manage to code this up. I also doubt it really is possible.

The same logic could however be implemented in Javascript. I'm using ubiquitous jQuery here:

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

The +1 in (w * 10 + 1) is to handle rounding problems.

回答2:

The unit is ch. ~~Not widely supported, if MDN is correct.~~ It is supported in current versions of major browsers.

Example

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

回答3:

Why not use a dynamic width for your div and use php to insert a break after your desired amount of characters? Would be something like this.

<?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 />";
 }
?>