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

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 的问题是框不会换行到文本的宽度。使用跨度有帮助，但它不会显示为 block 。强制它显示为一个 block 会出现与将它包装在一个普通的 div 中相同的问题。使用 div/span 组合也不起作用，因为如果文本太长，span 会忽略 div 的边界。

有没有办法限制文本的宽度，强制截断文本并在文本周围设置样式框？

Answer 1

根据我的评论，display:inline-block 应该会产生预期的效果。但它在