动态输入框中的字符数

Question

我有一个特殊的数学问题。我正在使用支持多种设备的 HTML/CSS/JS 开发一个混合移动应用程序。为此我没有指定输入框的宽度。

现在我需要截断输入框中的文本，但由于未指定宽度，我无法将文本字段的长度与硬编码值进行比较。但是，我可以获得输入框的长度（以 px 为单位）并且我使用的字体大小是固定的（10 px） 有没有办法计算一个 Xpx by Ypx 输入框中可以容纳多少个 14px 字体大小的字符？

Answer 1

我过去实现这一目标的方式可能效率不高，但它确实有效（差不多）。

这里的关键是克隆您的文本并开始对其进行更改。您可以使用 javascript 即时进行克隆。将其放在页面外的不可见 div 中，然后将文本分成单个字符块。然后可以将这些字符中的每一个都包装在一个跨度中。

下一步是确保您知道输入框的宽度，并从前面开始计算跨度的宽度。这应该只是在您的自定义“屏幕外”div 中获取所有 span 元素并遍历它们的情况。

一旦你点击了魔法宽度数字（或超过它），你就会知道你的单词中可以在框中包含的字符数。

当然，您所描述的内容有点奇怪，那就是您可能还需要计算出您可以在框中容纳多少“行”文本，并修改您的“总宽度”相应地（如果你有 1 行是 100px 宽，你的最大宽度将是 100px，但如果它是 3 行深，最大宽度将是 300px）。

正如我所说，这可能不是有效的处理器使用...但它是一种解决方案，它不需要您的字体具有特定的大小或类型。