在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>

不行

这是一把同样的小提琴

---

有人能帮我解决这个问题吗。谢谢：-）

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

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

更新：由于

不包括边距、填充和边框，因此无论边距和填充如何，此选项都有效。具有较大的填充/边框/边距，但仍能正确计算行数


更新2：添加了
Math.ceil（）
，因为partials应该总是四舍五入以获得正确的值。小提琴已经更新。
取跨度高度除以线高度。请注意，此版本不考虑可能影响结果的填充、边距等。不过，这对您的示例有效

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



更新：由于
不包括边距、填充和边框，因此无论边距和填充如何，此选项都有效。具有较大的填充/边框/边距，但仍能正确计算行数


更新2：添加了
Math.ceil（）
，因为partials应该总是四舍五入以获得正确的值。小提琴已经更新。
这里有一个解决方案，即使在元素上的填充、边距或边框发生更改时也可以使用：

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的宽度、填充、边距和边框

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

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的宽度、填充、边距和边框

这感觉很粗糙，但应该可以开始工作（我认为需要减去边框和填充），我想没有比这更好的了+1@JanDvorak已调查，无论边界/填充/marginHi Ryan是否有效，请检查。即使使用了
Math.floor（）
我知道这个答案不是100%正确，但它还是给了我一个错误的输出。在处理字体大小和溢出时，我还发现@mVChr的答案中存在一些缺陷。我很想找到一个解决方案，但这需要一些时间。仅供参考，我为这个问题找到的其他解决方案也有同样的缺陷。取决于你在做什么，你应该意识到，我怀疑任何解决方案都会因为怪癖而100%可靠。最好的办法是找到一个适合您的特定实现的解决方案，而不是一个适用于所有场景的通用解决方案。如果您遇到一些不考虑字体大小的解决方案，请务必告诉我。我现在就投票并接受答案：-）干杯，谢谢你的帮助。感觉有点不舒服，但应该可以开始工作（我想边界和填充需要减去），我想没有比这更好的了+1@JanDvorak已调查，无论边界/填充/marginHi Ryan是否有效，请检查。即使使用了
Math.floor（）
我知道这个答案不是100%正确，但它还是给了我一个错误的输出。在处理字体大小和溢出时，我还发现@mVChr的答案中存在一些缺陷。我很想找到一个解决方案，但这需要一些时间。仅供参考，我为这个问题找到的其他解决方案也有同样的缺陷。取决于你在做什么，你应该意识到，我怀疑任何解决方案都会因为怪癖而100%可靠。最好的办法是找到一个适合您的特定实现的解决方案，而不是一个适用于所有场景的通用解决方案。如果您遇到一些不考虑字体大小的解决方案，请务必告诉我。我现在投票并接受答案：-）干杯，谢谢你的帮助。我认为这没有必要，使用
innerHeight
然后减去填充和边框是没有意义的。看见此外，我还更新了我的answer@ryan更新的答案，即使未设置CSS
行高
也有效。当
$el.css（'line-height'）
将返回
'normal'
@mVChr:Thia显示错误的行数，如果我更改
字体大小
。检查Math.floor仍然给我一行，我在使用Math.ceilI不认为这是必要的，使用
innerHeight
然后减去填充和边框是没有意义的。看见此外，我还更新了我的answer@ryan更新的答案，即使未设置CSS
行高
也有效。当
$el.css（'line-height'）
将返回
'normal'
@mVChr:Thia显示错误的行数，如果我更改
字体大小
。检查Math.floor仍然给我一行，我在使用Math.ceil时正确