CSS：最大宽度不会收缩？ [英] CSS: Max-Width won't shrink?

问题描述

可能重复：

使CSS div宽度等于内容

我试图做一个聊天像应用程序，但现在我跑了一个小bug的某种类型。

I am trying to make a chat like application but now I ran acros a little bug of some sort.

我有一个div，最大宽度设置为350px。但是，当我把以下文本：

I have a div with a max-width set to 350px. But when I put the following text in it:

dddddddddddd dddddddddd dddddddddd dddddddddd

dddddddddddd ddddddddddd dddddddddd dddddddddd

每个空间，但div的宽度将保持在100px。我在jsFiddle这里做了一个例子：

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/

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

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我希望它看起来像第三个框，同时保留最大宽度部分

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?

推荐答案

请检查此 fiddle1 或 fiddle2 。

check this fiddle1 or fiddle2.

而不是使用 div 使用两个 div 的（或）

一个 div 和一个 span 。我想这是你想要的。

Instead of using one div use two div's (or)
one div and one span. I think this is what you want.

这篇关于CSS：最大宽度不会收缩？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！