最小宽度，最大宽度css使用最小宽度

Question

好吧，所以我希望做的是创建一个基于其中内容自动调整大小的DIV，但它应该使用尽可能小的宽度。我不知道如何做到这一点。

所以，如果我有一个DIV标签有3个字符，毫无疑问在200px宽，我想要的是div为200px然后。如果有更多的文本我希望它自动调整大小以便文本适合。

**这可能只用*** CSS *？****

** 更新 **

让我看看能否更好地解释这一点。我有一个DIV：

+++++++++++++++++++++++++++++++++
|-------------------------------|
|-----text this longer text-----|
|-------------------------------|
+++++++++++++++++++++++++++++++++

我希望发生的是如果文本被更改，它仍然至少200px宽。像这样：

+++++++++++++++++++++++++++++++++
|-------------------------------|
|-------------text--------------|
|-------------------------------|
+++++++++++++++++++++++++++++++++

但如果它的文字更长，那么第一个例子它会继续向外扩展超过200px宽：

++++++++++++++++++++++++++++++++++++++++++++++++++++++
|----------------------------------------------------|
|-----text this longer texttext this longer text-----|
|----------------------------------------------------|
++++++++++++++++++++++++++++++++++++++++++++++++++++++

但是，我确实有一个限制（有限的空间），所以我需要给它一个最大宽度。这是否有意义，还是我需要澄清更多内容？

Answer 1

问题是，由于<div>是块级元素，因此它们不会自动调整大小以适合其内容，尽管可以明确定义它们的宽度。像<span>这样的内联元素会自动调整大小以适应其内容，但他们不接受通过 CSS 定义其宽度。解决方法是让您的<div>表现得像表格单元格。这是一个例子：

CSS：

.widthlim {
    min-width: 200px;
    max-width: 1000px;
    background-color: red; /*This is just for us to be able to see the width*/
    display: table-cell;
    word-wrap: break-word;
    word-break: break-word;
}

HTML：

Example 1:<br/>
<div class = "widthlim">
Hello
</div>
Example 2:<br/>
<div class = "widthlim">
Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>
Example 3:<br/>
<div class = "widthlim">
Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello 
</div>

（请注意我们必须在<br/>之前添加<div>，因为它们不再是完全阻止级别的。）
以下是渲染时的外观： 这似乎适用于Firefox，Chrome和IE8（对于IE8，您需要指定DOCTYPE）。我希望有所帮助！

Answer 2

如果我理解了您正确询问的内容，<div>是块元素，这意味着默认情况下它们会占用整行 - 100％ 的屏幕宽度。请尝试使用<span>元素。

希望有所帮助，但如果您指定了您正在尝试或实现的行为，我们可以为您提供更多帮助。

Answer 3

您可以通过几种不同的方式“收缩 - 包装”div。最简单的可能是display: inline;，但浮动的行为也与你描述的一样。

查看http://haslayout.net/css-tuts/CSS-Shrink-Wrap了解详情和更多方法。

如果您希望最小宽度为200px（与您的第一段相矛盾），您可以使用min-width: 200px;和display: inline-block。