2

我有一行要在周围画边框的文本。目前，标记如下所示：

<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 的边界。

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

4

1 回答 1

1

根据我的评论，display:inline-block应该会产生预期的效果。但它在 <IE6 中不起作用。

于 2010-02-05T09:36:34.803 回答