gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 14:43:28 27 4
gpt4 key购买 nike

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

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

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

enter image description here

是否可以测量这个宽度?

最佳答案

这可能不是您想要的,因为它会修改您的标记,但我使用的技巧是获取您的文本并将每个单词包装在一个范围内。然后我查看每个 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>');

关于javascript - 是否可以测量左对齐文本中的最大自动换行宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33676115/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com