Making a div width equal to the longest word / sentence length inside it
I want to make the width of the div equal to the length of the long / word . Here's an example:
<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 the width of the longest word.
But my problem is with this example. When the content box is too small to contain both words on one line, the div is 100% wide of the box size:
<div id="3"> I_want_to_make_div_width_equal_to_this_word
and_anther_word_in_next_line </div>
Is it possible that a div with id = 3 will behave like id = 2, but unsigned <br />
?
Examples I just described: http://jsfiddle.net/2vffqrwy/ (make a window width that breaks the words in the third div into two separate lines).
Edit: The ideal solution is when div id = 3 displays both words on one line, when the window is large enough and behaves like div id = 2 when the window needs to be small to contain both words on one line.
source to share
New edit on OP's comments:
The only way I can solve this is using javascript,
I made an ugly and possibly overkill snippet that does the job:
It creates a clone node, sets it as inline
with white-space: nowrap
, and then adds each word one at a time, compares the width of the clone with the width of the parent. If it is larger then it assigns to the display: table-caption
original div, otherwise 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 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;
}
}
source to share
It's not really possible to create a linebreak without breaking elements around something like a span or div, for example. So make your 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 CSS like this:
div span{
display:block;
}
source to share