使用 CSS 根据每个字符的宽度设置等宽字体大小答案

【问题标题】：Use CSS to set the monospace font size based on the width of each character使用 CSS 根据每个字符的宽度设置等宽字体大小
【发布时间】：2015-05-21 09:57:55
【问题描述】：

有没有办法使用等宽字体的字形宽度来使用 CSS 设置字体大小？

例如，我希望这个框内的 10 个字符每个都正好是 20 像素宽，这样文本就可以完全填满这个框，而不管实际使用的是哪种等宽字体。目前我使用的 font-size 指令设置字体的高度，而不是每个字母的宽度。

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

&lt;div id=xyzzy&gt;1234567890&lt;/div&gt;

我正在寻找这个的原因是我有一些内容要在移动设备上以等宽字体显示，这些字体无法环绕或延伸到屏幕之外。我希望能够在 320 像素的屏幕上准确显示 44 个字符的文本。我似乎无法正确调整字体大小，使其在所有浏览器中看起来都不错。它要么延伸到视口之外，要么在右侧留下空白区域。

【问题讨论】：

不，没有设置可以使字体字形与其元素的宽度成比例。你需要javascript。 - stackoverflow.com/questions/8639249/…
我愿意使用 JavaScript。它不像纯 CSS 那样干净。我更喜欢 CSS 解决方案，但我会接受 JS 解决方案。

标签： css fonts width monospace

【解决方案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;
}

&lt;div id=xyzzy&gt;1234567890&lt;/div&gt;

我使用来自Calculate text width with Javascript 的代码来计算当前的文本宽度。

【讨论】：