javascript - 在JavaScript中找到字符串在设置宽度的div(没有新的行分隔符)内进入的行数

我有一个设置宽度的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);

将无法正常工作。

这是一样的小提琴。

FIDDLE

有人可以帮我这个忙。谢谢 ：-）

最佳答案

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

// 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)));

Updated fiddle

Fiddle without explicit line-height

更新：不管边距和填充，它都可以工作，因为.height()不包括边距，填充或边框。 This fiddle具有较大的填充/边框/边距，并且仍然可以正确计算行数。



更新2：添加的Math.ceil()作为局部变量应始终取整为正确的值。小提琴已更新。