javascript 如何根据里面的文字增加div的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25957073/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to increase div width according to the text inside it?
提问by Edie Johnny
I have a div that users input text in it. But I want to increase it's width according to it's text, until a max of 50% of the screen. My CSS code:
我有一个用户在其中输入文本的 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;
}
Result: 
结果：
There's a lot of space after the "555" message, I want this size only if the user inputs some text like:
“555”消息后有很多空间，只有当用户输入一些文本时，我才想要这个大小：
So, how can I increase the div's width dinamically, depending on the text size?
那么，如何根据文本大小动态地增加 div 的宽度？
采纳答案by Pivert
There are many ways to achieve this, but IMHO the cleanest is the following. Your problem is that the boxes are "greedy" and will try to expand to the available width.
有很多方法可以实现这一点，但恕我直言，最干净的方法如下。你的问题是盒子是“贪婪的”并且会尝试扩展到可用的宽度。
To prevent this, you can:
为了防止这种情况，您可以：
- Make it "float: left;"
- But also "clear: left;" to prevent additional "left floating" elements to use the available space on the right.
- 让它“浮动：左；”
- 但也“清楚：离开；” 防止额外的“左浮动”元素使用右侧的可用空间。
The CSS becomes:
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;
}
I provided full code and additional explanation (on mouseover) on the Liveweave here: http://liveweave.com/DFCZFj
我在 Liveweave 上提供了完整的代码和附加说明（在鼠标悬停时）：http://liveweave.com/DFCZFj
回答by Hashem Qolami
Try changing displaytype of the div to table.
尝试将displaydiv 的类型更改为table.
.messages {
display: table;
max-width: 50%;
min-width: 150px;
/* other declarations omitted due to brevity */
}
回答by Russell Bevan
Just add display:inline;. You can also remove the min width property, otherwise if the text is smaller, you will still have that gap.
只需添加display:inline;. 您还可以删除 min width 属性，否则如果文本较小，您仍然会有该间隙。
回答by Michael Hays
Block elements (div's default display type) will attempt to take up the maximum horizontal space of the container. Imagine an implicit width:100%whenever you see them. inline-blockwill create block level elements in which the next element will attempt to render horizontally adjacent (provided there is enough room). This is what you want to use (display: tablewill work in this solution as well, but it has its own idiosyncrasies. I avoid them.
块元素（div的默认显示类型）将尝试占用容器的最大水平空间。想象一下width:100%每当你看到它们时隐含的东西。 inline-block将创建块级元素，其中下一个元素将尝试水平相邻渲染（前提是有足够的空间）。这就是您想要使用的（display: table也可以在此解决方案中使用，但它有自己的特质。我避免使用它们。
So your solution requires three parts:
因此，您的解决方案需要三个部分：
First, you need to specify that the rows will be no larger than 50% of the available area. You will do this with an outer frame:
首先，您需要指定行将不大于可用区域的 50%。您将使用外部框架执行此操作：
.frame {
max-width:50%;
}
Next, the messages themselves should each be given space entire row(s) at a time. So we'll use an undecorated divtag around each message.
接下来，消息本身应该一次被赋予整行的空间。所以我们将div在每条消息周围使用一个未修饰的标签。
Finally, you will use display: inline-blockfor your innermost messageselements. Since they are the only child of their parent tag, you won't have to worry about elements winding around on one another. By using the inline-block, width is respected and this gives us a great place to apply the background color.
最后，您将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;
}
Just as a reference, one would expect your markup will look like the following:
作为参考，人们希望您的标记如下所示：
<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>
I think you'll find this gives you the intended effect. By the way, this is a general solution -- but if you choose a min-widththat is larger than 50%, you will ensure that two siblings of type inline-blockwill be too wide for a line. If you do this, then you can dispense with the extra divin the markup.
我想你会发现这会给你预期的效果。顺便说一下，这是一个通用的解决方案——但是如果您选择min-width大于 的50%，您将确保类型的两个兄弟inline-block对于一条线来说太宽了。如果您这样做，那么您可以省去div标记中的额外内容。
