html固定长度字符串,css - 以*字符*指定宽度

1em是M的高度，而不是宽度。 同样适用于ex，即x的高度。 更一般地说，这些是大写和小写字母的高度。

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

将上面的示例更改为

1 3 5 7 9 1 3 5 7 9 1

你会发现跨度的宽度和高度是不同的。 对于Chrome上的字体大小为20px，跨度为12x22像素，其中20px是字体的高度，2px是行高。

现在因为em和ex在这里没用，所以只有CSS解决方案的可能策略是

创建一个仅包含＆amp; nbsp;的元素

让它自动自动化

将你的div放在和

使其成为周围元素的10倍。

但是我无法对此进行编码。 我也怀疑它真的有可能。

然而，可以在Javascript中实现相同的逻辑。 我在这里使用无处不在的jQuery：

body { font-size: 20px; font-family: Monospace; }

src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">

1 3 5 7 9 1 3 5 7 9 1

$('body').append('

var w = $('#testwidth span').width();

$('#testwidth').remove();

$('div').css('width', (w * 10 + 1) + 'px');

+(in * w * 10 + 1)是处理舍入问题。