如何根据里面的文字增加div宽度呢?

时间:2014-09-21 07:54:10

标签: javascript jquery html css

我有一个用户输入文本的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;
}

结果:enter image description here

“555”消息后面有很多空格,只有当用户输入一些文字时我才想要这个尺寸:

enter image description here

那么,如何根据文本大小增加div的宽度?

4 个答案:

答案 0 :(得分:7)

有很多方法可以达到这个目的,但恕我直言最清洁的是以下几点。 你的问题是盒子是“贪婪的”,并试图扩展到可用的宽度。

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

  • 让它“浮动:离开;”
  • 但也“清楚:离开;”防止额外的“左浮动”元素使用右侧的可用空间。

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 screenshot

答案 1 :(得分:2)

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

<强> Example Here

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

答案 2 :(得分:2)

只需添加display:inline;即可。你也可以删除min width属性,否则如果文本较小,你仍然会有这个差距。

答案 3 :(得分:1)

块元素(div的默认显示类型)将尝试占用容器的最大水平空间。想象一下,只要你看到它们就会隐含width:100%inline-block将创建块级元素,其中下一个元素将尝试水平相邻呈现(假设有足够的空间)。这就是你想要使用的东西(display: table也可以在这个解决方案中使用,但它有自己的特性。我避免使用它们。

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

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

.frame {
  max-width:50%;
}

接下来,消息本身应该每次都为整行提供空间。因此,我们会在每条消息周围使用未修饰的div标记。

最后,您将display: inline-block用于最里面的messages元素。由于他们是父母标签中唯一的孩子,因此您不必担心元素彼此缠绕在一起。通过使用内联块,宽度得到尊重,这为我们提供了应用背景颜色的好地方。

.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的{​​{1}},你将确保50%类型的两个兄弟姐妹的范围太宽线。如果这样做,那么您可以省去标记中的额外inline-block