问题
Possible Duplicate:
Make CSS Div Width Equal To Contents
I am trying to make a chat like application but now I ran acros a little bug of some sort.
I have a div with a max-width set to 350px. But when I put the following text in it:
dddddddddddd ddddddddddd dddddddddd dddddddddd
It will add new lines at every space but the width of the div will stay at 100px. I made a little example in jsFiddle here:
http://jsfiddle.net/5t2hm/12/
As you can see the width of the yellow box is 100px while I want it to shrink to the width of the text. I also tried to fix it with using a element but the yellow box remains the same.
Bascily I want it to look like the third box while retaining the max-width part.
Does someone got any idea how the yellow box will shrink to the width of the text?
回答1:
check this fiddle1 or fiddle2.
Instead of using one div use two div's (or)
one div and one span. I think this is what you want.
回答2:
Use para
<p></P>
Demo: fiddle
回答3:
The default width of a DIV is 100%, so max-width is just capping that in your fiddle - it won't consider the width of the content.
To shrink your DIV to its content you'd need display: inline-block; or float:left; width:auto;.
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
来源：https://stackoverflow.com/questions/12672428/css-max-width-wont-shrink