如何自動化一個div？

我有一個關於如何自動化一個div類的簡短問題。如何自動化一個div？

我有一些錯誤消息，我想回聲。此errormessages我有一個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的寬度應該從根據被自動調整大小弦的長度。

來源

2013-03-11 bonny

不要使用'空白：nowrap'。它會擴展你的頁面的寬度。而是使用javascript或jQuery來調整大文本的字體大小。 – 2013-03-11 12:26:28

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; 
}

來源

2013-03-11 12:17:50