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

我想要的效果是我希望样式框是文本的宽度，除非宽度超过一定限度。然后我希望限制宽度，然后截断类应该开始。

仅使用div的问题是该框不会换行到文本的宽度。使用跨度有帮助，但它不会显示为块。强制它显示为块表现出与将其包装在普通div中相同的问题。使用div / span组合也不起作用，因为如果文本太长，span将忽略div的边界。

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

Answer 1

根据我的评论，display:inline-block应该会产生预期的效果。它不会在＆lt; IE6中工作。

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

1 个答案: