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

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

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

您可以使用css执行此操作：

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

---

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

---

如果确保使用固定宽度字体，则可以计算单个字符的宽度，例如使用。然后，简单地将

的宽度除以字符的宽度。

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

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

canvasrrenderingcontext2d

的

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

var target_width=200；//线宽
var text='Lorem ipsum。我想知道这篇文章适合多少字符。”；
var span=document.createElement（'span'）；
document.body.appendChild（span）；
span.style.whiteSpace='nowrap'；
//定义样式
span.style.fontFamily='Lucida Grande'；
span.style.fontSize='14px'；
var fit=text.length；
对于（变量i=0；itarget_width）{
拟合=i-1；
打破
}
}
document.body.removeChild（span）；
//fit=文本的字符数
//可以放在一条线上

你到底想用它实现什么？你无法准确地计算出仅用字体大小就可以容纳多少个字符。这不也取决于字体大小、字体重量以及填充物等吗？除非你使用固定宽度的字体，否则在给定宽度的行中不存在单个字符数。我也想这样做，但是放弃了，只是将溢出设置为隐藏。您可以在答案中使用我的部分代码并添加字符，直到

滚动宽度

超过

clientWidth

。谢谢，我每天都会学到一些新东西

文本溢出：省略号

今天尝试了这种方法，需要用“span.getBoundingClientRect（）.width”，因为“span.clientWidth”始终返回0。