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

Question

我有一行文字，我想周围绘制边框。目前，标记看起来像这样：

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

，我想的效果是，我想的风格框是文本的宽度，除非宽度超过一定限度。然后我希望的宽度受到限制，然后将truncate类应该踢英寸

仅使用一个div的问题是，所述盒不换行的文本的宽度。使用跨度帮助，但那么它不会显示为一个块。迫使其显示为一个块表现出同样的问题在一个普通的div包裹它。使用DIV / SPAN组合，因为跨度忽略div的边界，如果文本太长也不行。

有一种方法，以限制文本的宽度，它迫使截断和具有围绕文字风格框？

Answer 1

按我评论，display:inline-block应得到所需的效果。它不会在