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

Question

我想让 div 的宽度等于内容最长的单词/句子 的长度。这是示例：

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

这个 css 代码可以正常工作：

div {display: inline-block;}

它也适用于这个例子：

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

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>

id=3 的 div 是否可以表现得像 id=2 但没有<br /> 符号？

我刚刚描述的示例：http://jsfiddle.net/2vffqrwy/（将第三个 div 中的单词分成两行的窗口宽度）。

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

Answer 1

来自 OP 的 cmets 的新编辑：

我认为解决此问题的唯一方法是使用 javascript，
我做了一个丑陋且可能过度杀戮的 sn-p 来完成这项工作：
它创建节点的克隆，将其设置为inline 和white-space: nowrap，然后一次添加每个单词，将克隆宽度与父级宽度进行比较。如果更大，则将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;
     }
}

Here is Fiddle

Answer 2

您必须为您的 div 设置一个宽度，或者您可以将您的文本放在一个 <p></p> 标记中并在 CSS 上设置您的段落的宽度。

例子：

#3 {
 width: 300px;
}

或者，如果你想要更语义化的东西：

#3 p {
  width: 300px;

}

Answer 3

如果不将元素包裹在诸如 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>

还有这样的 CSS：

div span{
   display:block;
}

jsFiddle