如何按像素宽度限制输入的文本，而不是字符数答案

【问题标题】：How to limit entered text by pixel width, not character count如何按像素宽度限制输入的文本，而不是字符数
【发布时间】：2015-08-17 21:59:36
【问题描述】：

给定一个固定的像素宽度（文本需要适合 80 像素的按钮；假设没有填充），我如何将用户输入文本字段的文本限制为该限制 (80 像素)。如果有帮助，我知道字体（Arial）和字体大小（12pt）。

限制应该是实时执行的（用户应该能够在不提交的情况下删除和添加文本）。

例如，文本字段应该让用户输入 4 个“W's”或 9 个“I's”，只要它在 80 像素以下。

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以使用画布来测量像素完美的宽度。只需创建一个包装对象来进行测量（因此您无需每次都重新创建画布）：

function Measure(font) {
  this.canvas = document.createElement("canvas");
  this.ctx = this.canvas.getContext("2d");
  this.ctx.font = font;

  // method to call to measure width in pixels
  this.getWidth = function(txt) {
    return this.ctx.measureText(txt).width
  };
}

// set up a global instance
var m = new Measure("12pt sans-serif");

// get funky
document.querySelector("input").onkeyup = function() {
  var w = Math.ceil(m.getWidth(this.value)); // round up in case of float
  document.querySelector("span").innerHTML = w;
};

&lt;input style="font:12pt sans-serif"&gt; &lt;span&gt;0&lt;/span&gt;

【讨论】：

【解决方案2】：

可能你需要一些类似 text.width() 的东西

var test = document.getElementById("Test");
test.style.fontSize = fontSize;
var height = (test.clientHeight + 1) + "px";
var width = (test.clientWidth + 1) + "px";

【讨论】：

【解决方案3】：

我认为该代码会对您有所帮助：

#id {
    width: ;
    height: ;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

【讨论】：

【解决方案4】：

只是在这里抛出一个想法，但是为什么不使用等宽字体呢？由于等宽字体字符都是固定宽度，给定字体大小、一些实验和稍后的一些数学运算，您可以使用字符数将输入限制为 80 像素。

【讨论】：

这个想法是不要通过大写 W 的最坏情况来限制字符的数量，而是允许任何实际适合的情况。如果我将其限制为 4 W，那么我也只能使用 4 I。谢谢！
@JonS。等宽字体最酷的地方在于“W”与“.”的宽度相同。例如：Who am I与........等宽