宽度不会缩小？

2018-06-22 21:32:40

可能重复：
使CSS Div宽度等于内容

我正在尝试进行类似应用程序的聊天，但是现在我跑了一些类似的小bug。

我有一个最大宽度设置为350px的div。但是当我把下面的文字放进去时：

dddddddddddd ddddddddddd dddddddddd dddddddddd

它会在每个空间添加新行，但div的宽度将保持在100px。我在jsFiddle中做了一个小例子：

http://jsfiddle.net/5t2hm/12/

正如你所看到的黄色框的宽度是100px，而我希望它缩小到文本的宽度。我也尝试使用元素修复它，但黄色框保持不变。

Bascily我希望它看起来像第三个盒子，同时保留最大宽度部分。

是否有人知道黄色框将如何缩小到文本的宽度？

检查这个fiddle1或fiddle2 。

而不是使用一个div使用两个div （或）
一个div和一个span 。我认为这是你想要的。

使用第

<p></P>

演示：小提琴

DIV的默认宽度为100％，因此max-width仅限于您的小提琴中 - 它不会考虑内容的宽度。

要缩小你的DIV到它的内容，你需要display: inline-block; 或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/64223.html