有没有办法计算出浏览器在已知大小的容器内每行显示的字符数？所以我有一个已知尺寸的矩形，recX以及recY一个预定义FONT_SIZE的13.
我正在尝试计算这样的段落的高度：
- 除以
rectX获取FONT_SIZE每行显示的字符数。 - 将段落的长度（字符数）除以宽度得到它的行数，然后将它乘以
FONT_SIZE得到它的显示高度。
问题是对于我的 650px in width 容器（测试用例），650 / 13 的结果是 50，但是浏览器每行显示大约 100 个字符，它不坚持任何默认值。我正在使用font-family:Lucida Console Monospace 13px, line-height:1em.
编码
var width = Math.floor(this.articleSize.width / this.FONT_SIZE);
// this.article.paragraphs is an array of paragraphs without <p> or </p>.
for (var i = 0, ii = this.article.paragraphs.length; i < ii; i++) {
// based on the above compute the height/number of rows for each paragraph.
// This is a basic matrix approach.
// For those of you not familiar with the Closure Library, the goog.math.Size obj
// is a (width, height) object.
this.article.sizes[i] = new goog.math.Size(width, Math.ceil(this.article.paragraphs[i].length / width * this.FONT_SIZE));
};
var i = 0, currentPage = 0, pg = [], height = this.articleSize.height - 20, ii = this.article.paragraphs.length;
while (i < ii) {
// So here based on the height I am trying to see how many paragraphs
// Can fit into one 'page'. The navigation is horizontal, with a book like
// animation.
if((height - this.article.sizes[i].height) > 0) {
pg.push('<p>' + this.article.paragraphs[i] + '</p>');
height -= this.article.sizes[i].height;
i++;
} else {
this.article.pages[currentPage] = pg;
currentPage++;
pg = [];
height = this.articleSize.height - 20;
};
};
这必须适用于任何分辨率/视口大小，这意味着页面是在运行时计算的，并且在每次调整大小时都会再次完成整个过程，这与当前大小不同且以任何方式超过 50 个像素。
这是解决方法
project.MainArticle.loader.prototype.divideText = function(articleText) {
articleText = goog.string.collapseWhitespace(articleText);
articleText = articleText.replace(/<p><\/p>|• Comments will be turned on later/g, '').replace(/<p>\.<\/p>/g, '');
var trick = articleText.replace(/<p>/g, '<p class = \'trick-p\'>');
this.articleTextContainer.innerHTML = trick;
this.preAppendedParagraphs = goog.dom.getElementsByClass('trick-p');
for(var i = 0, ii = this.preAppendedParagraphs.length; i < ii; i++) {
this.article.sizes.push(+(this.preAppendedParagraphs[i]['offsetHeight'] + 10));
};
this.articleTextContainer.innerHTML = '';
this.article.paragraphs = articleText.replace(/<p>/g, '').split('</p>');
};
/**
* Divide the text into pages
* @private
*/
project.loader.prototype.createPages_ = function() {
var i = 0, currentPage = 0, pg = [], height = this.articleSize.height, ii = this.article.paragraphs.length - 1;
while(i < ii) {
if((height - this.article.sizes[i]) >= 0) {
pg.push('<p class=\'nz-ma-txt-p\'>' + this.article.paragraphs[i] + '</p>');
height -= this.article.sizes[i];
i++;
} else {
this.article.pages[currentPage] = pg;
currentPage++;
pg = [];
height = this.articleSize.height;
};
};
console.log(this.article);
};
