如何限制元素的最小和最大寬度？

我有一行我想繪製邊框的文字。目前，標記看起來是這樣的：如何限制元素的最小和最大寬度？

<div id="titleBox"><span id="titleName" class="truncate">Really really long long long title name</span></div>

的樣式看起來是這樣的：

#titleBox{ 
    margin-top: 10px; 

} 

#titleName{ 
    margin: 5px; 
    height: 1.6em; 
    width: auto; 
    max-width: 15.385em;  
    padding: 0.369em; 
    margin: 0.369em; 
    line-height: 1.7; 
    color: rgba(0,0,0,0.4); 
    background-color: rgba(204,204,204,0.4); 
    border: 3px solid rgba(255,255,255,0.14); 
    font-size: 153.9%; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;  
} 

.truncate { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -ms-text-overflow: ellipsis;   
    -o-text-overflow: ellipsis; 
    -moz-binding: url('../templates/ellipsis.xml#ellipsis'); 
}

，我想效果是我想要的風格框是寬度的文字，除非寬度超過一定的限制。然後我想寬度被限制，然後截斷類應該踢in。

只使用div的問題是該框不包裹到文本的寬度。使用跨度有幫助，但不會顯示爲塊。強制它顯示爲塊表現出與將其包裝在普通div中相同的問題。使用div/span組合不起作用，因爲如果文本太長，跨度會忽略div的邊界。

有沒有辦法限制文本的寬度，迫使它截斷並在文本週圍有一個樣式化的框？

來源

2010-02-03 Avery

你試過'display：inline-block'嗎？它不會在 2010-02-03 16:39:21

我有幾個想法，但我還不完全確定。我可以問：你想要長文本在'span'的寬度內換行，還是在*一行*和*指定寬度*處截斷？ – 2010-02-03 17:12:44

@ ricebowl：後者 - 在一行上以指定的寬度截斷。 – Avery 2010-02-04 08:07:47

根據我的意見，display:inline-block應該給予預期的效果。但它不會在< IE6中工作。

來源

2010-02-05 09:36:34

如何限制元素的最小和最大寬度？

回答

相關問題