CSS 以*字符*为单位指定宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8186457/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Specify width in *characters*
提问by Martin Vilcans
When using a fixed width font, I'd like to specify the width of an HTML element in characters.
使用固定宽度字体时，我想以字符为单位指定 HTML 元素的宽度。
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:
“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>
The result is not what I wanted as the browser line breaks after column 15, not 10:
结果不是我想要的，因为浏览器在第 15 列而不是第 10 列后换行：
1 3 5 7 9 1 3 5
7 9 1
(Result in Firefox and Chromium, both in Ubuntu.)
（结果在 Firefox 和 Chromium 中，都在 Ubuntu 中。）
Wikipedia's articlesays 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.
维基百科的文章说，一个“em”并不总是一个 M 的宽度，所以看起来“em”单位肯定不能被信任。
采纳答案by Gerd Riesselmann
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.
1em 是 M 的高度，而不是宽度。同样适用于 ex，即 x 的高度。更一般地说，这些是大写和小写字母的高度。
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.
你会注意到跨度的宽度和高度是不同的。对于 Chrome 上 20px 的字体大小，跨度是 12x22 px，其中 20px 是字体的高度，2px 是行高。
Now since em and ex are of no use here, a possible strategy for a CSS-only solution would be to
现在因为 em 和 ex 在这里没有用，一个可能的 CSS-only 解决方案的策略是
- 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.
- 创建一个只包含 的元素
- 让它自动调整大小
- 将您的 div 放在和
- 使其为周围元素的 10 倍。
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:
然而，同样的逻辑可以在 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>
The +1 in (w * 10 + 1) is to handle rounding problems.
(w * 10 + 1) 中的 +1 是为了处理舍入问题。
回答by transistor09
chunit
ch单元
The unit you're looking for is ch. According to the MDN docs:
您要找的单位是ch。根据MDN 文档：
ch: Represents the width, or more precisely the advance measure, of the glyph "0" (zero, the Unicode character U+0030) in the element'sfont.
ch：表示元素的font.
It is supported in current versions of major browsers (caniuse).
当前版本的主要浏览器 ( caniuse)都支持它。
Example
例子
pre {
width: 80ch; /* classic terminal width for code sections */
}
