使用固定宽度字体时,我想以字符指定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"单位看起来不可信任.
tra*_*r09 180
单位是ch.如果MDN是正确的,则不受广泛支持. 主流浏览器的当前版本支持它.
pre {
width: 80ch; /* classic terminal width for code sections */
}
Ger*_*ann 22
1em是M的高度,而不是宽度.同样适用于ex,即x的高度.更一般地说,这些是大写和小写字母的高度.
宽度是一个完全不同的问题....
将上面的示例更改为
<div>
<span>1</span> 3 5 7 9 1 3 5 7 9 1
</div>
你会发现跨度的宽度和高度是不同的.对于Chrome上的字体大小为20px,跨度为12x22像素,其中20px是字体的高度,2px是行高.
现在因为em和ex在这里没用,所以只有CSS解决方案的可能策略是
但是我无法对此进行编码.我也怀疑它真的有可能.
然而,可以在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>
+(in*w*10 + 1)是处理舍入问题.