Javascript 如何根据其中的文本增加div宽度？

我有一个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的宽度？

尝试将div的

显示类型更改为
表格


。消息{
显示：表格；
最大宽度：50%；
最小宽度：150px；
/*由于简洁，省略了其他声明*/
}
只需添加
显示：内联。您还可以删除min width属性，否则，如果文本较小，则仍会有该间隙。
实现此目的的方法有很多，但最干净的方法如下。
您的问题是，这些框是“贪婪的”，会试图扩展到可用的宽度

要防止出现这种情况，您可以：


让它“浮动：左
但也要使用“clear:left”；以防止额外的“left floating”元素使用右侧的可用空间

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上提供了完整的代码和额外的解释（在mouseover上）：

块元素（
div
的默认显示类型）将尝试占用容器的最大水平空间。想象一个隐式的
宽度：100%
，只要你看到它们<代码>内联块
将创建块级元素，其中下一个元素将尝试水平相邻渲染（前提是有足够的空间）。这就是您想要使用的（
display:table
也适用于此解决方案，但它有自己的特性。我避免使用它们

因此，您的解决方案需要三个部分：

首先，您需要指定行不大于可用区域的50%。您将使用外部框架执行此操作：

.frame {
  max-width:50%;
}

接下来，消息本身应该一次给整行空间。因此，我们将在每个消息周围使用未修饰的
div
标记

最后，对于最里面的
消息
元素，您将使用
display:inline block
。因为它们是父标记的唯一子元素，所以您不必担心元素彼此缠绕。通过使用inline block，宽度得到了尊重，这为我们应用背景色提供了一个很好的位置

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

作为参考，您的标记应该如下所示：

 <div class="frame">
  <div><div class="messages">2014</div></div>
  <div><div class="messages">2014</div></div>
  <div><div class="messages">
   2014-09-20 17:46:41 minhavidaemquotes:555
  </div></div>
  <div><div class="messages">
   2014-09-20 17:46:41 minhavidaemquotes:555 this is some extra
   text
  </div></div>
 </div>


2014
2014
2014-09-20 17:46:41 minhavidaemquotes:555
2014-09-20 17:46:41 minhavidaemquotes:555这是额外的
文本

我想你会发现这给了你预期的效果。顺便说一句，这是一个通用的解决方案——但是如果你选择一个大于
50%
的
minwidth
，你将确保类型
inline block
的两个同级对于一行来说太宽。如果你这样做，那么你就可以省去额外的
div
>在标记中。
将最小宽度降低到10em，然后使用display:inline block；inline display是否尊重最小宽度？使用float，您必须清除每个块底部或每个下一个元素上的浮动，看看这个示例：您会看到添加的段落包装了浮动元素。此方法会影响正常的流程，这可能会导致造成麻烦。如果我声明float:right，会有问题吗？因为用户的消息将位于右侧，而其他消息则位于左侧，如Facebook、Whatsapp等。如果页面上有任何其他内容，float肯定会让您遇到问题。除了某些特殊情况（将文本环绕在图像周围），不应使用float。我已修改了带有此答案的liveweave，以向您说明原因：哎呀。看起来Hashem已经指出了此解决方案的问题。；-）