如何使用 JavaScript 计算一行中的字符数答案

【问题标题】：How to count number of characters in a line using JavaScript如何使用 JavaScript 计算一行中的字符数
【发布时间】：2011-11-14 04:35:34
【问题描述】：

假设我有一个宽度为 200 像素、字体大小为 16 的 div。现在我想计算一行 div 中可以容纳的字符数。如何使用 JavaScript 或 jQuery 计算字符数。

【问题讨论】：

你到底想用它来完成什么？无论如何，您无法准确计算仅字体大小可以容纳多少个字符。
这不也取决于字体大小和字体粗细以及填充等吗？
除非您使用的是固定宽度的字体，否则没有单一数量的字符可以放入给定宽度的行中。
我也想这样做，但放弃了，只是将溢出设置为隐藏
您可以在this question 的答案中使用我的部分代码并添加字符，直到scrollWidth 大于clientWidth。

标签： javascript jquery html

【解决方案1】：

更新：哦，我忽略了隐藏的评论。上面发布的 CSS 解决方案肯定更适合这项工作。我的回答直接解决了计算适合一行的字符的问题。我不会删除它，因为有人可能会觉得它很有用。

即使你有一个比例字体，也绝对有可能获得一行可以容纳的字符数。有两种方法 - 使用以下技巧或 CanvasRenderingContext2D 的 measureText 方法。

var target_width = 200; // line width
var text = 'Lorem ipsum. I want to know how many chars of this text fit.';

var span = document.createElement('span');
document.body.appendChild(span);
span.style.whiteSpace = 'nowrap';
// define the style
span.style.fontFamily = 'Lucida Grande';
span.style.fontSize = '14px';

var fit = text.length;
for (var i = 0; i < fit; ++i) {
  span.innerHTML += text[i];
  if (span.clientWidth > target_width) {
    fit = i - 1;
    break;
  }
}

document.body.removeChild(span);

// fit = the number of characters of the text
//       that you can fit on one line

【讨论】：

今天尝试了这种方法，需要将“span.clientWidth”更改为“span.getBoundingClientRect().width”，因为“span.clientWidth”总是返回0。

【解决方案2】：

实际上我想截断 div 中的文本，使其完全适合进入那个div（文本长度非常大）

你可以用 css 做到这一点：

white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis; //Doesn't work in all browsers, just adds "..."

http://jsfiddle.net/46AML/

【讨论】：

谢谢，我每天都学到一些新东西text-overflow:ellipsis

【解决方案3】：

如果每个字符的宽度相同，您只能计算每行的字符数。这适用于所有固定宽度的字体，例如 stackoverflow 的问题编辑器中的字体。

如果您确保使用固定宽度的字体，您可以计算单个字符的宽度，例如使用function posted in this answer。然后，只需将<div> 的宽度除以字符的宽度即可。

【讨论】：