2

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

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

#xyzzy {
  width: 200px;
  padding: 0;
  margin: 10px;
  border: 10px solid black;
  font-family: monospace;
  font-size: 20px;
}
<div id=xyzzy>1234567890</div>

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

4

1 回答 1

-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 计算文本宽度的代码来计算当前的文本宽度。

于 2015-03-18T15:30:35.183 回答