在 * 字符 * 中指定宽度

在使用 固定宽度字体固定宽度字体时，我希望在 角色中指定 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”单元看起来肯定不能信任。

100743 次浏览
小开
最佳答案

Em 是 M 的高度，而不是宽度。X 的高度也是如此。更一般地说，这些是大写字母和小写字母的高度。

宽度是一个完全不同的问题... 。

将上面的示例更改为

<div>
<span>1</span> 3 5 7 9 1 3 5 7 9 1
</div>

你会注意到跨度的宽度和高度是不同的。在 Chrome 中，字体大小为20px 的跨度是12x22px，其中20px 是字体的高度，2px 是行的高度。

现在，既然 em 和 ex 在这里没有用，那么一个可能的策略就是使用

  1. 创建一个只包含 & nbsp 的元素;
  2. 让它自动化
  3. 把你的 div 放进去
  4. 使它比周围的元素大10倍。

然而，我没有设法编写这个代码。我也怀疑这真的是可能的。

然而，同样的逻辑也可以在 Javascript 中实现:

<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是用来处理舍入问题的。

小开

ch单元

你要找的单位是 ch。根据 MDN 文件:

表示元素 font中字形“0”(0，Unicode字符 U + 0030)的宽度，或者更精确地说是提前量度。

主流浏览器的当前版本(犬科动物)都支持它。

例子

pre {
width: 80ch; /* classic terminal width for code sections */
}

提交答案