最小宽度,最大宽度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>s是块级元素,因此它们不会自动调整大小以适合其内容,尽管可以明确定义它们的宽度.内联元素如<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/>s之前添加s,<div>因为它们不再是完全阻塞级别的).
以下是渲染时的外观: 这似乎适用于Firefox,Chrome和IE8(对于IE8,您需要指定DOCTYPE).我希望有所帮助!