我有一个特殊的数学问题。我正在使用支持多种设备的 HTML/CSS/JS 开发一个混合移动应用程序。为此我没有指定输入框的宽度。
现在我需要截断输入框中的文本，但由于未指定宽度，我无法将文本字段的长度与硬编码值进行比较。但是，我可以获得输入框的长度（以 px 为单位）并且我使用的字体大小是固定的（10 px） 有没有一种方法可以计算 Xpx by Ypx 输入框中可以容纳多少个 14px 字体大小的字符？
问问题
166 次
1 回答
0
我过去实现这一目标的方式可能效率不高，但它确实有效（差不多）。
这里的关键是克隆您的文本并开始对其进行更改。您可以使用 javascript 即时进行克隆。将它放在页面外的不可见 div 中，然后将文本分成单个字符块。然后可以将这些字符中的每一个都包装在一个跨度中。
下一步是确保您知道输入框的宽度，并开始将跨度的宽度相加，从前面开始。这应该只是在您的自定义“屏幕外”div 中获取所有 span 元素并遍历它们的情况。
一旦你点击了魔法宽度数字（或超过它），你就会知道你的单词中可以在框中包含的字符数。
当然，您所描述的内容有一个小问题，那就是您可能还需要计算出您可以在框中容纳多少“行”文本，并相应地修改您的“总宽度”（如果你有 1 行是 100px 宽，你的最大宽度是 100px，但如果它是 3 行深，最大宽度是 300px）。
正如我所说，这可能不是有效的处理器使用......但它是一个解决方案，它不需要你的字体是特定的大小或类型。
于 2013-02-28T01:05:09.037 回答