用*字符指定宽度*
当使用固定宽度的字体时 ，我想用字符指定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中。）
维基百科的文章说，“em”并不总是M的宽度，所以它看起来像“em”单位不能被信任。
1em是M的高度，而不是宽度。 ex同样适用于ex，这是x的高度。 更一般地说，这些是大写和小写字母的高度。
宽度是一个完全不同的问题….
把你的例子改为
<div> <span>1</span> 3 5 7 9 1 3 5 7 9 1 </div>
你会注意到跨度的宽度和高度是不同的。 Chrome上的字体大小为20px，跨度为12×22像素，其中20px为字体高度，2px为线条高度。
现在因为em和ex在这里没有用处，所以对于一个纯CSS的解决scheme来说可能的策略是
- 创build一个只包含一个＆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> </span></div>'); var w = $('#testwidth span').width(); $('#testwidth').remove(); $('div').css('width', (w * 10 + 1) + 'px'); </script> </body> </html>
（w * 10 + 1）中的+1用于处理舍入问题。
单位是ch 。 没有得到广泛的支持，如果MDN是正确的。 它在当前版本的主stream浏览器中受到支持。
例
pre { width: 80ch; /* classic terminal width for code sections */ }
为什么不为你的div使用dynamic宽度，并使用PHP来插入你想要的字符数量后rest一下？ 会是这样的。
<?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 />"; } ?>
