How Dynamically Resized a DIV element's Width to Fit its Text Content?

Answer 1

<style>
div {
  white-space: nowrap;
}
</style>

This will do the trick (though you probably should be more specific about the divs that you want to change. This means the divs that you do use this on won't have any line feeds unless you specify them yourself. But I'm guessing you're using this for labels, so you should be all set.

See an example.

Answer 2

I wonder how could I dynamically resized the div's width to fit the text content (without wrapping)?

Assuming the content would fit without overflowing, you could use a float without a width set (width isn't required in CSS 2.1 or greater). Without more detail, I can't suggest where to put it or what other properties to set to get the desired effect (eg, floats float down around following content, so put it at the beginning of a paragraph).

If you're not concerned with the effect looking perfect on old browsers like Internet Explorer, you could use display: table or display: table-cell, with the caveat that tables don't overflow: they stretch. That stretching may be desirable if you want to avoid overflow of your div, but allow it to overlow the viewport -- eg, a film strip that scrolls horizontally. In that case, altCognito's suggestion of white-space: nowrap would be very useful.