javascript - 查找适合多少个字母的div

Question

我有一个具有一些标准宽度/高度的 div..我应该知道哪些 css 参数，以计算 div 适合多少个字母而不会溢出？我认为以下参数是必要的..

1. 字体大小
2. 文本索引
3. 字母间距
4. 行高

那我如何计算 div 适合的最大字母数？

Answer 1

一个div能容纳多少个字符是很难衡量的，因为不同的浏览器有不同的渲染方式，不同的操作系统甚至图形适配器渲染抗锯齿都可能略有不同。另一个可能起作用的因素是输出显示器可以显示的每英寸像素数。除此之外，字体本身和文本也起着一定的作用，因为您通常不会处理固定的字体。因此，您需要了解很多有关使用过的硬件、软件和深入的字体参数的信息，这完全超出了 javascript 的范围。

无论如何可能有办法......

根据您想知道的内容，您可以使用固定宽度和高度的隐藏标签以及 scrollLeft 和 scrollTop 属性来查明文本是否超过标签尺寸。这可以通过将 scrollLeft 和/或 scrollTop-Properties 设置为非常高的值(例如 99999)来实现，然后浏览器会将其替换为实际值。这些值为0或大于0。如果大于0，该值表示像素数，文本会溢出。

对于隐藏字段很重要的是，它必须添加到文档节点树中(使用 appendChild)

您可能会创建一个循环来将字符(或您的文本)填充到您的隐藏文件中，该文件具有与源标记/字段完全相同的属性(使用 cloneNode(true))。在循环中，您将检查 scrollLeft/scrollTop 是否溢出。如果它溢出，您将拥有标签可以显示的最大文本。为了加快速度，您可能需要将隐藏的标签移出浏览器 View (例如左:10000px；)。

测量后，您可以从节点树中删除隐藏的标签。广泛使用时要小心 - 实现可能相对较快 - 但如果您想在前端情况下在客户端执行数十项检查，则用户体验可能会迅速下降，具体取决于客户端的浏览器类型、处理器速度和系统负载边。