当使用固定宽度字体时，我希望能够以字符为单位指定 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中都是这个结果。)
维基百科文章说“em”并不总是等于字母M的宽度，因此看起来“em”单位不能用于此。
 或 输入。它在功能上等同于CSS的ch单位，但由于ch并不被广泛支持，因此它可以在HTML中用作解决方法（虽然这种方式不太美观，但应该可行）。 - waldyrious1em表示M的高度，而不是宽度。Ex也是同理，表示x的高度。更一般地说，它们是大写字母和小写字母的高度。
宽度是完全不同的问题......
将您上面的示例更改为
<div>
<span>1</span> 3 5 7 9 1 3 5 7 9 1
</div>
你会注意到，这个span的宽度和高度是不同的。对于Chrome上字体大小为20px的情况，span的大小为12x22像素，其中20px是字体的高度，2px是行高。
现在由于em和ex在这里没有用处，CSS-only解决方案的一个可能策略是:
然而，我没能编写代码实现这一点。我也怀疑这真的可能吗。
然而，相同的逻辑可以在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 是为了处理四舍五入问题。