Making div width equal to the longest word/sentence length inside it

问题

I want to make div width equal to content longest word/sentence length. Here is sample:

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

It works fine with this css code:

div {display: inline-block;}

It also works in this example:

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

Div with id="2" has a width of the longest word.

But my problem is with this example. When content window is too small to contain both words in one line, div have width of 100% window size:

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

Is it possible for the div with id=3 to behave like id=2 but without <br /> sign?

Examples I just described: http://jsfiddle.net/2vffqrwy/ (make width of window that break words in third div into two separate lines).

Edit: The perfect solution is when div id=3 display both words in one line when window is big enough and behaves like div id=2 when window is to small to contain both words in one line.

回答1:

New Edit from OP's comments :

The only way I can see to resolve this is using javascript,
I made a uggly and probably overkilling snippet which does the work :
It creates a clone of the node, set it as inline with white-space: nowrap and then add each word one at a time, compare the clone width with parent's width. If it's larger, then it assigns display: table-caption to the orginal div, else it adds the next word.

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

回答2:

You must set a width for your div, or you can put your text inside a <p></p> tag and set the width for your paragraph on CSS.

Example:

#3 {
 width: 300px;
}

or, if you want something more semantic:

#3 p {
  width: 300px;

}

回答3:

It is actually impossible to create linebreak without wraping the elements around something like a span or a div for example. So make the html like this:

<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>

And the CSS like this:

div span{
   display:block;
}

jsFiddle

来源：https://stackoverflow.com/questions/25273519/making-div-width-equal-to-the-longest-word-sentence-length-inside-it

标签

javascript

html

css

responsive-design