最大宽度与twitter引导标签

Question

我试图通过标签来实现与SO类似的东西.

它看起来很棒,但问题是我想要每个标签的最大宽度,所以如果标签的长度太大,它将被截断.

我可以通过以下方式实现:

.label{
    width: 50px;    
    float: left;    
    overflow: hidden;  
}

好吧,它有效,但是当我这样做时,我的号码与标签不在同一行.

我怎样才能达到与第一小提琴相同的效果,但最大宽度.

Answer 1

这应该做的伎俩:

.label {
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

JSFiddle演示.

我在这里所做的就是放弃了float: left并取而代之display: inline-block.然后我给它一个省略号text-overflow属性使它看起来更好,并设置为vertical-align使其middle与.multiple元素一致.哦,我已经更换了width与max-width制止小标签具有相同的大小.

示例用法

这是一个带有多个标签的示例(每个标签都在新线上):JSFiddle.

显然你可以相应调整max-width.