Question

Alright, so here’s what I’m trying to do. Let’s say I have the following HTML:

<div id="test">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

And the following CSS:

#test {
    height: 100px;
    min-width: 100px;
}

Now, let’s imagine that the paragraph in the HTML above can be of variable length. Or maybe there are two paragraphs. It doesn’t really matter. What I’m looking for is a CSS or jQuery way to have the div always remain 100 pixels tall, and to end up no less than 100 pixels wide, but no wider than is necessary to prevent vertical overflow.

So, if the contents are short enough—say, a single word—the div will have a height of 100 pixels and a width of 100 pixels. If the contents is an entire paragraph, the div will still have a height of 100 pixels, the contents will fill it vertically, and the div will expand horizontally only enough to prevent overflow.

Answer 1

Use a while loop to compute the height of the inner paragraph, and continually adjust the width of the parent div until it fits.

while ($('#test > p').height() > $('#test').height()) {
    $('#test').width($('#test').width() + 1); // or +5 or +10 for a faster result
}

http://jsfiddle.net/mblase75/MFHah/

Warning: this may cause infinite loops in certain circumstances.