Question

我有一个非常有问题的任务，我想在我的div中计算最宽词的width，所以我可以用javascript设置min-width一个可调整大小的div。

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

小提琴：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

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

测量隐藏跨度中每个字母的大小，每个字母一个。您可以在实时每个浏览器中存储或计算它，因为每个浏览器渲染器都不会对字体进行类似的解释。
拆分文字中的字词（按空格我猜）
根据字母包含的字母计算每个字词的宽度，包括字母之间的平均空格宽度。这不是完全准确的，但它应该“足够正确”。
现在你只需要按降序排序你的和结果，并让第一个结果知道哪个单词显示为最长的单词（并以像素为单位得到它的宽度）。

Answer 2

您可以将单词放入单独的隐藏div中，然后循环测量它们，直到获得最大的div。

此处示例：2

Answer 3

IIIIIIIIII

WWWWWWWWWW

你的方法有点缺陷。查看上面的10个i个字符？查看下面的10 W个字符？它们的字符数相同，但显然W字符的像素水平跨度更大。您的方法只能使用{Courier。{/ p>等monospaced（固定宽度）字体正常工作

您可能会采取其他一些方法：

（最简单）为div固定宽度，不用担心宽度。
为div设定固定宽度。使用text-overflow CSS属性，并指定＆＃39; ellipsis＆＃39;。
迭代所有单词。将每个单词的字符放入空div中，获取其ACTUAL像素宽度（不是字符），并记下哪一个是最宽的。根据结果设置div大小。

如何计算div中最宽字的宽度？

3 个答案: