如何根据文本内容增加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的宽度？

- Edie Johnny

---

将你的最小宽度降低到10em，并使用display:inline-block; - dandavis

Answer 1

有很多方法可以实现这个目的，但我认为最清晰的方法是以下内容。

你的问题是盒子“贪婪”，会试图扩展到可用的宽度。

要防止这种情况，可以：

• 将其设置为“float：left;”
• 同时还需添加“clear：left;”以防止其他“向左浮动”的元素使用右侧的可用空间。

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

- Pivert

---

使用float时，必须在每个块的底部或每个下一个元素上清除float。看一下这个例子：http://liveweave.com/KqVGPF，你会看到添加的段落包裹了浮动元素。这种方法会影响正常流程，可能会引起麻烦。 - Hashem Qolami

如果我声明float:right会有问题吗？因为用户的消息将在右侧，而其他消息将在左侧，就像Facebook、WhatsApp等。 - Edie Johnny

如果页面上还有其他内容，使用float肯定会导致问题。除了某些特殊情况（如图像周围的文本环绕），不应使用float。我已经修改了发布此答案的liveweave，以向您展示原因：http://liveweave.com/8rWIpf - Michael Hays

糟糕，看起来Hashem已经指出了这个解决方案的问题。;-) - Michael Hays

Answer 2

尝试将

的display类型更改为table。

这里有一个示例

.messages {
   display: table;
   max-width: 50%;
   min-width: 150px;
   /* other declarations omitted due to brevity */
}

- Hashem Qolami

Answer 3

块级元素（div的默认显示类型）将尝试占用容器的最大水平空间。当您看到它们时，请想象一个隐式的width:100%。 inline-block将创建块级元素，下一个元素将尝试水平相邻呈现（如果有足够的空间）。这是您要使用的内容（display：table也可以在此解决方案中工作，但它有自己的特殊性。我避免使用它们。

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

首先，您需要指定行的大小不超过可用区域的50％。您将使用外框架来完成此操作：

.frame {
  max-width:50%;
}

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

最后，您将为最内部的 messages 元素使用 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>

我认为您会发现这样做可以达到预期效果。顺便说一下，这是一个通用解决方案——但如果您选择的min-width大于50％，则会确保两个类型为inline-block的兄弟元素过宽而无法放入同一行中。 如果这样做，您就可以在标记中省略额外的div。

- Michael Hays

Answer 4

只需添加display:inline;即可。您还可以删除最小宽度属性，否则如果文本较小，则仍将存在该间隙。

- Russell Bevan

---

内联显示是否尊重最小宽度？ - dandavis