I need to write, in JavaScript (I am using jQuery), a function that is aware of the number of characters that fit in a line of the browser window. I'm using a monospace font to ease the problem, but it would be better if I generalize it for different fonts.
我需要用JavaScript(我使用的是jQuery)编写一个函数，该函数可以知道浏览器窗口行中适合的字符数。我正在使用monospace字体来缓解这个问题，但是如果我对不同的字体进行归纳，效果会更好。
How can I know how many characters would fill a row in the browser? The intention is to count the number of characters that fill a line.
我怎么知道在浏览器中一行可以填满多少个字符?目的是计算填充一行的字符数。
3 个解决方案
#1
4
You can create element and append characters to it until you detect wrapping, e.g. by observing changes in offsetHeight (you can optimze it using bisection algorithm).
您可以创建元素并将字符添加到它，直到您检测到包装，例如通过观察offsetHeight的变化(您可以使用bisection算法优化它)。
This is of course very dependent on browser, system, installed fonts and user's settings so you would have to calculate it for each fragment of text each time page is displayed, resized or when user changes font size (even full-page zoom introduces some off-by-one errors which could cause number of characters change).
这当然是非常依赖于浏览器,系统,安装字体和用户设置的所以你要计算每个片段的文本页面显示,每次调整或者当用户更改字体大小(甚至整页缩放“从一开始”介绍了一些错误可能导致字符数的变化)。
Therefore it may be an overkill in most situations and when implemented poorly cause more trouble than it solves.
因此，在大多数情况下，它可能会造成过度的破坏，如果实施得不好，会导致比它解决的问题更多的麻烦。
There are other solutions, e.g. if you want to ensure that only one line is visible you can use white-space:nowrap and overflow:hidden and in some browsers text-overflow:ellipsis to make text cut nicely. Or if you don't want words cut, use 1-line high container with overflow:hidden.
还有其他的解决方案，例如，如果你想确保只有一行是可见的，你可以使用空格:nowrap和overflow:hidden，在一些浏览器中:text-overflow:省略号，这样可以很好地剪切文本。或者，如果你不希望文字被删除，可以使用一个带有溢出的1行高容器:隐藏。
#2
2
You can get the total width available for the browser with
您可以获得浏览器可用的总宽度
window.innerWidth
And then you can get the width of an element with the following method.
然后你可以用下面的方法得到一个元素的宽度。
document.getElemenById('elem').clientWidth
#3
1
There is no easy way to do this in HTML.
在HTML中没有简单的方法来实现这一点。
However, if you really must know, you can probably figure it out with some really ugly javascript:
但是，如果你一定要知道，你可以用一些非常难看的javascript来解决:
First, create a <div> with the width you need, put some characters in and request its .height() in pixels. Then, keep adding characters to it and keep checking the .height(), when the height of the <div> changes you know it has grown to fit a new line of text.
首先，创建一个具有所需宽度的
#1
4
You can create element and append characters to it until you detect wrapping, e.g. by observing changes in offsetHeight (you can optimze it using bisection algorithm).
您可以创建元素并将字符添加到它，直到您检测到包装，例如通过观察offsetHeight的变化(您可以使用bisection算法优化它)。
This is of course very dependent on browser, system, installed fonts and user's settings so you would have to calculate it for each fragment of text each time page is displayed, resized or when user changes font size (even full-page zoom introduces some off-by-one errors which could cause number of characters change).
这当然是非常依赖于浏览器,系统,安装字体和用户设置的所以你要计算每个片段的文本页面显示,每次调整或者当用户更改字体大小(甚至整页缩放“从一开始”介绍了一些错误可能导致字符数的变化)。
Therefore it may be an overkill in most situations and when implemented poorly cause more trouble than it solves.
因此，在大多数情况下，它可能会造成过度的破坏，如果实施得不好，会导致比它解决的问题更多的麻烦。
There are other solutions, e.g. if you want to ensure that only one line is visible you can use white-space:nowrap and overflow:hidden and in some browsers text-overflow:ellipsis to make text cut nicely. Or if you don't want words cut, use 1-line high container with overflow:hidden.
还有其他的解决方案，例如，如果你想确保只有一行是可见的，你可以使用空格:nowrap和overflow:hidden，在一些浏览器中:text-overflow:省略号，这样可以很好地剪切文本。或者，如果你不希望文字被删除，可以使用一个带有溢出的1行高容器:隐藏。
#2
2
You can get the total width available for the browser with
您可以获得浏览器可用的总宽度
window.innerWidth
And then you can get the width of an element with the following method.
然后你可以用下面的方法得到一个元素的宽度。
document.getElemenById('elem').clientWidth
#3
1
There is no easy way to do this in HTML.
在HTML中没有简单的方法来实现这一点。
However, if you really must know, you can probably figure it out with some really ugly javascript:
但是，如果你一定要知道，你可以用一些非常难看的javascript来解决:
First, create a <div> with the width you need, put some characters in and request its .height() in pixels. Then, keep adding characters to it and keep checking the .height(), when the height of the <div> changes you know it has grown to fit a new line of text.
首先，创建一个具有所需宽度的