以*字符指定宽度* [英] Specify width in *characters*
问题描述
使用固定宽度字体时，我想以字符指定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中生成）
Wikipedia的文章说，em并不总是M的宽度，因此它绝对看起来像em 单位不能被信任。
1em是M的高度，而不是宽度。对于ex来说同样成立，这是x的高度。
宽度是完全不同的问题....
将您的示例更改为
< div&
< span> 1< / span> 3 5 7 9 1 3 5 7 9 1
< / div>
你会注意到span的宽度和高度是不同的。对于Chrome上的20px的字体大小，跨度为12x22像素，其中20像素为字体的高度，2像素为行高。
ex在这里是没有用的，一个可能的策略为CSS-only解决方案是
- 创建一个元素只包含& nbsp
- 让它自动调整大小
- 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.
然而，我没有设法编码这个。我也怀疑它真的是可能的。
然而同样的逻辑可以在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>& nbsp;< / span>< / div>'）
var w = $（'＃testwidth span'）。width（）;
$（'＃testwidth'）。remove（）;
$（'div'）。css（'width'，（w * 10 + 1）+'px'）;
< / script>
< / body>
< / html>
在（w * 10 + 1）中的+1用于处理舍入问题。
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.
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
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> </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.
这篇关于以*字符指定宽度*的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
