max-width adjusts to fit text?

Question

Not the best title, but anyway...

I have an element with a max-width and some text.

If the text is longer than will fit on one line, I get this:

Answer 1

Feel like word-break is what you need http://caniuse.com/word-break although it is CSS3 new property with not such a wide support yet

Answer 2

Not Possible by CSS Alone

According to BoltClock in this answer, it is not possible. The explanation makes sense. For the line wrap to occur to begin with, the line needs to reach the max-width setting. Once done, it wraps, but it does not reshrink because it is using that size for the calculation of the wrap.

As far as I know, this is still not possible.

Answer 3

Use the above solution, but on the inner element set display: table-caption, and DON'T set max-width: 0px. This will include safari support (as well as Firefox 17 and IE8/9 and Chrome)

Answer 4

I’ve yet to find a method that does not require the use of both a wrapper element and JavaScript, but it’s possible that this one suits your needs.

<div id="example">
    <span id="content">My text here, hello everyone!</span>
</div>​​​​​​​​​​​​​​​​​​​​​

​var content = document.getElementById("content");

content.parentNode.style.width = content.offsetWidth + "px";​​​​

a working example