如何测量符合文档宽度的字符数？

Question

我需要在JavaScript中编写（我使用的是jQuery），这是一个能够识别适合浏览器窗口一行的字符数的函数。我正在使用等宽字体来缓解这个问题，但如果我将它推广到不同的字体会更好。

我怎么知道浏览器中有多少个字符会填满？目的是计算填充一行的字符数。

Answer 1

您可以创建元素并为其添加字符，直到您检测到包装，例如通过观察offsetHeight中的变化（您可以使用二分算法对其进行优化）。

这当然非常依赖于浏览器，系统，已安装的字体和用户的设置，因此每次显示页面，调整大小或用户更改字体大小时，您都必须为每个文本片段计算它（甚至是整页缩放）介绍一些可能导致字符数变化的一对一错误。

因此，在大多数情况下这可能是一种矫枉过正，如果执行不当会导致比解决更多的麻烦。

还有其他解决方案，例如如果您想确保只有一行可见，您可以使用white-space:nowrap和overflow:hidden，并在某些浏览器中使用text-overflow:ellipsis来精确剪切文字。或者，如果您不想剪切单词，请使用带有overflow:hidden的1行高容器。

Answer 2

您可以使用

获取浏览器的总宽度

window.innerWidth

然后您可以使用以下方法获取元素的宽度。

document.getElemenById('elem').clientWidth  

Answer 3

在HTML中没有简单的方法。

然而，如果你真的必须知道，你可以用一些非常丑陋的javascript来解决它：

首先，创建一个＆lt; div＆gt;使用你需要的宽度，放入一些字符并以像素为单位请求其.height（）。然后，继续添加字符并继续检查.height（），当＆lt; div＆gt;的高度时。改变你知道它已经发展到适合新的文本行。