如何根据里面的文字增加div的宽度？答案

【问题标题】：How to increase div width according to the text inside it?如何根据里面的文字增加div的宽度？
【发布时间】：2023-04-06 12:05:01
【问题描述】：

我有一个用户在其中输入文本的 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 的宽度？

【问题讨论】：

将最小宽度降低到 10em，然后使用 display:inline-block;

标签： javascript jquery html css

【解决方案1】：

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

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

将其设为“浮动：左；”
还有“清除：左；”以防止额外的“左浮动”元素使用右侧的可用空间。

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

【讨论】：

使用浮动，你必须清除每个块底部或每个下一个元素上的浮动，看看这个例子：liveweave.com/KqVGPF你会看到添加的段落包裹了浮动元素.此方法影响正常流量，可能会造成麻烦。
如果我声明float有问题吗：对吗？因为用户的消息将在右侧，而其他消息在左侧，例如 Facebook、Whatsapp 等...
如果页面上还有其他内容，float 肯定会让您陷入困境。除了某些特殊情况（在图像周围环绕文本），不应使用浮点数。我已经修改了带有此答案的 liveweave，以向您展示原因：liveweave.com/8rWIpf
哎呀。看起来哈希姆已经指出了这个解决方案的问题。 ;-)

【解决方案2】：

尝试将 div 的 display 类型更改为 table。

Example Here

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

【讨论】：

【解决方案3】：

只需添加display:inline;。你也可以去掉 min width 属性，否则如果文本更小，你仍然会有那个间隙。

【讨论】：

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

【解决方案4】：

块元素（div 的默认显示类型）将尝试占用容器的最大水平空间。每当您看到它们时，想象一下隐含的width:100%。 inline-block 将创建块级元素，其中下一个元素将尝试水平相邻渲染（前提是有足够的空间）。这就是您想要使用的（display: table 也可以在此解决方案中使用，但它有自己的特点。我避免使用它们。

所以你的解决方案需要三个部分：

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

.frame {
  max-width:50%;
}

接下来，应为每条消息本身一次分配整行的空间。因此，我们将在每条消息周围使用未修饰的div 标签。

最后，您将使用display: inline-block 作为最里面的messages 元素。由于它们是其父标签的唯一子元素，因此您不必担心元素相互缠绕。通过使用 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>

我想你会发现这会给你带来预期的效果。顺便说一句，这是一个通用的解决方案——但是如果您选择大于50% 的min-width，您将确保inline-block 类型的两个兄弟姐妹对于一条线来说太宽了。如果你这样做，那么你可以省去标记中额外的div。

【讨论】：