最大宽度与twitter引导标签

Question

我正在尝试用标签来实现与SO类似的东西。

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

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

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

好的，它有效，但当我这样做时，我的号码是not on the same line as label。

如何获得与第一个小提琴相同的效果，但最大宽度。

Answer 1

这应该可以解决问题：

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

JSFiddle demo

我在此处完成的操作已被删除float: left，并将其替换为display: inline-block。然后我给它一个省略号text-overflow属性以使其看起来更好，并将vertical-align设置为middle以使其与.multiple元素一致。哦，我已将width替换为max-width，以阻止较小的标签尺寸相同。

使用示例

以下是一个包​​含多个标记的示例（每个标记都在新行上）：JSFiddle。

显然，您可以相应地调整max-width。

Answer 2

你可以提供

 float:left; 

到span.multiple，所以span和label也在同一行。

.multiple{
    float:left;
}

Answer 3

您可以为这两者添加行高

.label, .multiple {
  line-height: 15px;
}

以下是jsFiddle链接。

Answer 4

.label{
   max-width: 150px;    
   float: left;    
   overflow: hidden;  
 }