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

我有一行我想绘制边框的文字。目前，标记看起来是这样的：如何限制元素的最小和最大宽度？

<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

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

回答

相关问题