使用CSS根据每个字符的宽度设置单空格字体大小

Question

有没有一种方法可以使用单间距字体的字形宽度来使用CSS设置字体大小？

例如，我希望这个框中的10个字符每个都正好是20像素宽，这样无论实际使用的是哪种单空格字体，文本都能准确地填充框。目前，我使用的字体大小指令设置字体的高度，而不是每个字母的宽度。

#xyzzy {
  width: 200px;
  padding: 0;
  margin: 10px;
  border: 10px solid black;
  font-family: monospace;
  font-size: 20px;
}

<div id=xyzzy>1234567890</div>

我之所以寻找这个，是因为我有一些内容可以在手机上以单空间字体显示，不能在屏幕外换行或扩展。我希望能够在320像素的屏幕上显示44个字符的文本。我似乎无法正确设置字体大小，使其在所有浏览器中都看起来不错。它要么延伸到视口之外，要么在右侧留下空白。

Answer 1

这里有一个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>

我使用Javascript计算文本宽度的代码来计算当前的文本宽度。