有没有办法使用等距字体的字形宽度来使用CSS设置字体大小？
例如，我希望此框内的10个字符每个宽度正好为20px，这样，无论实际使用哪种等宽字体，文本都能准确地填满该框。当前，我正在使用的font-size指令设置字体的高度，而不是每个字母的宽度。
#xyzzy {
width: 200px;
padding: 0;
margin: 10px;
border: 10px solid black;
font-family: monospace;
font-size: 20px;
}<div id=xyzzy>1234567890</div>我之所以要这样做，是因为我有一些内容要以等宽字体显示在移动设备上，而这些字体不能环绕或延伸到屏幕之外。我希望能够在320像素的屏幕上准确显示44个字符的文本。我似乎无法正确设置字体大小，以使其在所有浏览器中看起来都不错。它要么延伸超过视口，要么在右侧留出空白。
这是一个JavaScript解决方案，从20px字体大小开始，然后按比例缩放它以完全适合所需的200px宽度。
var xyzzy = document.getElementById('xyzzy');
var currentWidth = xyzzy.clientWidth+1;
var desiredWidth = 200;
var currentFontSize = 20;
xyzzy.style.fontSize = currentFontSize * desiredWidth / currentWidth + "px";#xyzzy {
display: inline-block;
white-space: nowrap;
padding: 0;
margin: 10px;
border: 10px solid black;
font-family: monospace;
font-size: 20px;
}<div id=xyzzy>1234567890</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句