javascript - 如何根据里面的文字增加div的宽度呢？

Question

我有一个 div，用户可以在其中输入文本。但我想根据它的文本增加它的宽度，直到最多 50% 的屏幕。我的 CSS 代码:

.messages {
   max-width:50%;
   min-width:150px;
   background: #ffeec0;
   padding:2px;
   margin:3px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
   border:1px solid #ffdd7c;
}

结果:

“555”消息后有很多空间，只有当用户输入如下文本时我才需要这个大小:

那么，如何根据文本大小动态增加 div 的宽度？

Answer 1

有很多方法可以实现这一点，但恕我直言，最干净的方法如下。你的问题是盒子是“贪婪的”并且会尝试扩展到可用宽度。

为防止这种情况，您可以:

• 让它“ float :左；”
• 还有“清晰:左；”以防止额外的“左浮动”元素使用右侧的可用空间。

CSS 变为:

.messages {
   max-width:50%;
   min-width:150px;
   background: #ffeec0;
   padding:2px;
   margin:3px;
   border-radius: 2px;
   border:1px solid #ffdd7c;
   float:  left;
   clear: left;
}

我在这里提供了关于 Liveweave 的完整代码和附加解释(鼠标悬停时):http://liveweave.com/DFCZFj