Javascript 使div宽度等于其中最长的单词/句子长度

我想使div宽度等于content最长单词/句子的长度。以下是示例：

<div id="1">I_want_to_make_div_width_equal_to_this_word</div>

它在本例中也起作用：

<div id="2"> I_want_to_make_div_width_equal_to_this_word <br/> 
             and_anther_word_in_next_line </div>

我想让div\u宽度等于这个词

还有下一行的另一个单词

id=“2”的Div具有最长单词的宽度

但我的问题是这个示例。当内容窗口太小，无法在一行中同时包含两个单词时，div的宽度为100%窗口大小：

<div id="3"> I_want_to_make_div_width_equal_to_this_word
             and_anther_word_in_next_line </div>

我想让div\u width\u等于这个词
还有下一行的另一个单词

id=3的div是否可以像id=2一样工作，但没有

符号？

我刚才描述的示例：（将窗口的宽度设置为将第三个div中的单词分成两行）

编辑：

---

完美的解决方案是，当窗口足够大时，div id=3将两个单词显示在一行中，当窗口太小而无法将两个单词都包含在一行中时，其行为类似于div id=2。

您必须为div设置宽度，或者您可以将文本放入

标记中，并在CSS上设置段落的宽度

例如：

#3 {
 width: 300px;
}

或者，如果您想要更具语义的内容：

#3 p {
  width: 300px;

}

实际上，如果不将元素环绕在诸如span或div之类的对象上，就不可能创建换行符。
因此，让html如下所示：

<div id="1">I_want_to_make_div_width_equal_to_this_word</div>
<div id="2">I_want_to_make_div_width_equal_to_this_word
   <br/>and_anther_word_in_next_line
</div>
<div id="3">
   <span>I_want_to_make_div_width_equal_to_this_word</span>
   <span>and_anther_word_in_next_line</span>
</div>

div span{
   display:block;
}

根据OP的评论进行新编辑：

解决这个问题的唯一方法是使用javascript，

我做了一个很难看的片段，可能有点过头了：

它创建节点的克隆，使用
空白：nowrap
将其设置为
inline
，然后一次添加一个单词，将克隆宽度与父级宽度进行比较。如果较大，则将
display:table caption
分配给原始div，否则添加下一个单词

CSS

div {
    display: inline-block;
    background-color:pink;
    margin-bottom:5px;
}
.caption {
    display : table-caption;
}
.cloned {
    visibility : hidden;
    white-space : nowrap;
}

Javascript

 var clone, el,w;

(cloneIt)();
function cloneIt(){
    el = document.getElementById('3');
    clone = el.cloneNode(true);
    clone.className = "cloned";
    el.parentNode.appendChild(clone);
    w = clone.innerHTML.split(' ');
    wrapIt();
}
window.onresize = wrapIt;

function wrapIt(){
    clone.innerHTML = w[0]; //minimum content is first word
    for(i=1; i<w.length; i++){
        clone.innerHTML += w[i]+' ';//add next word
        if(i==w.length-1 && clone.offsetWidth <= el.parentNode.offsetWidth){
            //we're at the end and it's still smaller than parent width?
            el.style.width = clone.offsetWidth+ 1 + 'px';
            return;
            }
        if(clone.offsetWidth <= el.parentNode.offsetWidth){ 
            //add a new word
            continue;
        }
        //Gone too far? remove last word
        clone.innerHTML = clone.innerHTML.replace(w[i], '');
        el.style.width = clone.offsetWidth+ 1 + 'px';
        return;
     }
}

var克隆，el，w；
（克隆生物）（）；
功能克隆{
el=document.getElementById（'3'）；
克隆=el.cloneNode（真）；
clone.className=“clone”；
el.parentNode.appendChild（克隆）；
w=clone.innerHTML.split（“”）；
wrapIt（）；
}
window.onresize=wrapIt；
函数wrapIt（）{
clone.innerHTML=w[0]；//最小内容是第一个单词
对于（i=1；i排版是如何影响这一点的？你是如何考虑不同风格的字符宽度的？你的答案很好，直到我的窗口大小不足以在一行中包含两个单词。但我喜欢你的观点-它让我们更近了！这不是优雅的解决方案。看看@Arthur answer。你给出的结果与@Eiki wit相同h同样的问题：当窗口足够大时，你不能用这个解决方案在一行中同时显示两个单词。@Everetts更新了答案，使用javascript。对不起……我对任何想法都不在意！你做的很好。可能是因为我的问题不够精确，我在你的答案中看到了一个小问题：如果有更多的问题，会发生什么n 2个单词？你的答案不可能让div width等于前两个单词和另一行中的第三个。下面是一个例子：@Everettss Ok，并不简单，但我认为新的编辑以一种令人讨厌的方式实现了你想要的功能（每次调整窗口大小时都会进行大量计算）.我不认为你可以在你的页面上的每个div上都使用它，但它确实起到了作用，并且可以提供一些线索来做得更好
 var clone, el,w;

(cloneIt)();
function cloneIt(){
    el = document.getElementById('3');
    clone = el.cloneNode(true);
    clone.className = "cloned";
    el.parentNode.appendChild(clone);
    w = clone.innerHTML.split(' ');
    wrapIt();
}
window.onresize = wrapIt;

function wrapIt(){
    clone.innerHTML = w[0]; //minimum content is first word
    for(i=1; i<w.length; i++){
        clone.innerHTML += w[i]+' ';//add next word
        if(i==w.length-1 && clone.offsetWidth <= el.parentNode.offsetWidth){
            //we're at the end and it's still smaller than parent width?
            el.style.width = clone.offsetWidth+ 1 + 'px';
            return;
            }
        if(clone.offsetWidth <= el.parentNode.offsetWidth){ 
            //add a new word
            continue;
        }
        //Gone too far? remove last word
        clone.innerHTML = clone.innerHTML.replace(w[i], '');
        el.style.width = clone.offsetWidth+ 1 + 'px';
        return;
     }
}