javascript - 如何计算div中最宽单词的宽度？

Question

这个问题已经有答案了:

Calculate text width with JavaScript (29 个回答)

已关闭 6 年前。

我有一个相当有问题的任务，我想计算 width我的 div 中最宽的单词，因此我可以设置 min-width在可调整大小的 div 上使用 javascript。

我尝试做一些事情，我设法得到了最长的单词，不幸的是不是最宽的，而且我也未能得到他的宽度。

fiddle :https://jsfiddle.net/Lindow/oayddb8w/3/

JavaScript:

function longestWord(string) {
    var str = string.split(" ");
    var longest = 0;
    var word = null;
    for (var i = 0; i < str.length; i++) {
        if (longest < str[i].length) {
            longest = str[i].length;
            word = str[i];
        }
    }
    return word;
}

var test = document.getElementById("Test");
var longest_word = longestWord(test.innerHTML); // test.innerHTML == 'dofkdspakdasdsakd,'
var width = (longest_word.clientWidth + 1) + "px"; // 'NaNpx'
alert(longest_word);

HTML:

<div id="Test">
  abcdefghijklmn, opqrstuvwxyzAB
  ddoafkpdsfk, 
  dsapdlasèd. CDEFGHIJKLMNO,
  dofkdspakdasdsakd, PQRSTUVWXYZ
</div>

有什么建议吗？这里的问题不是获取所有单词的宽度，而是获取一堆文本中最宽的单词，这改变了问题。

<小时/>

更新:

这篇文章帮助了我:Find the width of the widest word in the html block

我必须把每个词都放在 <span> 中标记并根据它们的 fontFamily 和 fontSize 检查哪一个最宽。

Answer 1

这是一个奇怪的需求，所以没有“干净”的选项。但是，如果您确实想这样做，可以按照以下步骤操作:

1. 测量隐藏跨度中每个字母的大小，每个字母一个。您可以按浏览器实时存储或计算它，因为每个浏览器渲染器对字体的解释方式不同。
2. 拆分文本中的单词(我猜是按空格)
3. 根据每个单词包含的字母计算每个单词的宽度，包括字母之间的平均空格宽度。这不会完全准确，但应该“足够正确”。
4. 现在，您只需按降序对总和结果进行排序，并获取第一个结果即可知道哪个单词显示为最长的单词(并获取其宽度(以像素为单位))。