假设我有一个宽度为 200 像素、字体大小为 16 的 div。现在我想计算一行 div 可以容纳的字符数。如何使用 JavaScript 或 jQuery 计算字符数。
最佳答案
更新:哦,我忽略了隐藏的评论。上面发布的 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
关于javascript - 如何使用 JavaScript 计算一行中的字符数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8113874/