javascript - 是否可以测量左对齐文本中的最大自动换行宽度？

Question

是否可以测量左对齐文本中的实际自动换行宽度？

例如，下面的语句是左对齐的。根据元素的宽度，它可以包裹在单词“their”或单词“the”处。

标记为红色的宽度与元素宽度不一致，因为当单词不适合行时会在随机位置发生换行。

是否可以测量这个宽度？

Answer 1

这可能不是您想要的，因为它会修改您的标记，但我使用的技巧是获取您的文本并将每个单词包装在一个范围内。然后我查看每个 span 标签并确定哪个是最右边的:

Demo

代码:

标记:

<div class="test">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </div>

<div class="results">
</div>

带有 jQ​​uery 的 JavaScript:

var text  = $('div.test').text();
var words = text.split(' ');
var html  = '';

$.each(words, function(i, word) {
    html += '<span>' + word + '</span> ';
});

$('div.test').html(html);

var farthestRight = 0;
$('div.test span').each(function(i,e) {
    var left = $(e).position().left;
    var width = $(e).width();

    if (left + width > farthestRight) {
        farthestRight = left + width;
    }

    // Uncomment to see debug data
    // $('.results').append('<div>' + left + ', ' + width + ', ' + (left + width) + '</div>');
});

$('.results').append('<div>' + farthestRight + '</div>');