Width won't shrink?
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?
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.
Use para
<p></P>
Demo: fiddle
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; float:left; width:auto; .
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
链接地址: http://www.djcxy.com/p/64224.html下一篇: 宽度不会缩小？