如何自适应调整div大小？

Question

我有一个关于如何自动调整div类大小的简短问题。

我有一些错误信息想要输出。对于这些错误信息，我有一个div类：

.wrapper form .error {
    color: #ccc;
    position: absolute;
    z-index: 2;
    background-color:#fff;
    height: 26px;
    line-height: 26px;
    padding: 10px; 
    border: solid #ccc;
    border-width: 1px 1px 1px 1px;
    width: 200px; /*should be auto but doesnt work*/
    line-height: 26px;
    right: 100%;
    top: 7%;
} 

我希望我的不同长度的错误信息可以在一行中显示，而不会换行，并且此div的宽度应根据字符串的长度自动调整大小。

- bonny

---

不要使用“whitespace：nowrap”。它会扩展页面的宽度。相反，使用JavaScript或jQuery，在大文本上调整字体大小。 - Mr_Green

Answer 1

http://jsfiddle.net/REsm3/

使用white-space：nowrap可以实现你所想要的单行结果。然而，为了实现你所谓的“自动宽度”样式，你的元素需要是内联或内联块级元素。请参见我的JSFiddle，了解如何更改您的标记以实现此目的。简而言之，我会将错误信息包装在一个公共元素中，例如class="message"，并将其样式设置为text-align: center。 然后，我会将error设置为display: inline，从而实现所需的“自动宽度”样式。

<div class="message">
    <div class="error">
        This is an error message
    </div>
</div>

<div class="message">
    <div class="error">
        This is an error message. This is an error message. This is an error message.
    </div>
</div>

以及CSS：

.message
{
    text-align: center;
    margin-bottom: 10px;
}

.message .error
{
    border: 1px solid red;
    padding: 2px;
    white-space: nowrap;

    display: inline;
    display: inline-block;
}

- Eli Gassert

Answer 2

使用 white-space: nowrap; 可以让文本内容不换行，保持在同一行。

- James Coyle

Answer 3

white-space: nowrap; 可以让文本保持在一行。

使用 display: inline; 或者 display: inline-block，div 的宽度将会根据文本需要自适应（尽可能窄）。

JS Bin example

- hsan

Answer 4

CSS规则：

white-space: nowrap;

将会防止您的行自动换行。

将错误 div 的宽度设置为 100％，它将自动填充可用空间。如果您详细说明需要自动调整大小的 div 的原因，我可能能够提供进一步的帮助。

- Barney