javascript - 在javascript中查找字符串在设置宽度的div内运行的行数（没有新的行分隔符）

Question

我有一个div固定的宽度，里面span有一些文字。样式

#web_view_container
{
    position:absolute;
    top:100px;
    left:100px;
    width:306px;
    height:202px;
    overflow:auto;  
}
.sentences
{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:20px;
    line-height:120%;   
}

的HTML

<div id="web_view_container">    
    <span class="sentences">Hello, This is last sentence This is last sentence This is last sentence This is last sentence This is last sentence.</span>
</div>

现在，我将如何获得<span>已经遇到的行数。

请注意，我没有使用换行符，所以

var lines = $('#web_view_container').html().split("\n");  
alert(lines.length);

不会工作。

这是同样的小提琴。

小提琴

有人可以帮我解决这个问题。谢谢 ：-）

Answer 1

取跨度的高度并除以线高。请注意，此版本不考虑可能影响结果的填充、边距等。不过，这适用于您的示例。

// webkit line-height normal consideration thanks to mVChr
var $sent = $('.sentences'),
    lh = $sent.css('line-height'),
    ws = $sent.css('white-space');
if (lh === 'normal') {
    $sent.css('white-space', 'nowrap');
    lh = $sent.height();
    $sent.css('white-space', ws);
}
$('.lines').text(Math.ceil($('.sentences').height() / parseInt(lh, 10)));

更新的小提琴

没有明确行高的小提琴

更新：无论边距和填充如何，这都有效，因为.height()不包括边距、填充或边框。这个小提琴有很大的填充/边框/边距，仍然可以正确计算行数。

更新 2：作为部分添加Math.ceil()应始终四舍五入以获得正确的值。小提琴已更新。

Answer 2

这是一个即使在元素上的填充、边距或边框发生更改时也可以使用的解决方案：

var textLineCount = function(el) {
    var $el = $(el),
        height,
        lineHeight,
        initWhitespace = $el.css('white-space');

    height = $el.height();
    $el.css('white-space', 'nowrap');
    lineHeight = $el.height();
    $el.css('white-space', initWhitespace);

    return Math.floor(height / lineHeight);
};

alert(textLineCount($('.sentences')[0]) + ' lines');

尝试更改演示中各种元素的宽度、填充、边距和边框的 CSS。

看演示