7

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

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

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

**更新**

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

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

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

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

但如果它是更长的文本，那么第一个示例将继续向外扩展超过 200 像素宽：

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

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

4

3 回答 3

7

问题在于，由于<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）。我希望这有帮助！

于 2012-08-10T12:59:29.347 回答
2

您可以通过几种不同的方式“收缩包装”一个 div。最简单的可能是，display: inline;但浮动也会像你描述的那样表现。

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

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

于 2012-08-09T19:52:16.357 回答
1

如果我正确理解了您的问题，<div>则 s 是块元素，这意味着默认情况下它们将占据一整行 -屏幕宽度的100%。尝试使用该<span>元素。

希望对您有所帮助，但如果您指定您想要做或实现的行为，我们可以为您提供更多帮助。

于 2012-08-09T19:52:02.893 回答